Mocking backend with Angular in-memory-api

Photo by Mikhail Rakityanskiy on Unsplash

I’m going to show you how to mock a simple backend in Angular, so that you can taste front-end development backend-lessly.

In case you are wondering Angular in-memory-web-api is suggested for mocking backend in the official Angular’s documentation.

In this article:

1. Return fake data from an HTTP GET request;
2. HTTP interception to fake authentication of a user.

Installation and configuration

1. Install Angular in-memory-web-api

npm i angular-in-memory-web-api

2. Configure it in your module

Implement In-Memory DB

Create MyInMemoryService which serves some data about customers and products.

When we call api/customers or api/products In-Memory DB automatically handles the request and responds with customers or products data, that works because createDb returns an object where keys are routes and values data arrays.

Let’s test the mocking backend

For instance write a simple service which sends HTTP GET requests to api/customers.

In short, In-Memory intercepts calls and give back some data (you can check Angular in-memory-web-api to see how it responds by default).

A step further: Intercepting HTTP calls

What if you need some more advanced response?

Take for instance that you want to mock the authentication of a user. The following example shows you how to intercept HTTP calls and fake the authentication of a user.

In-Memory can do more!

You can also add, remove, search and update, for more info head to Angular in-memory-web-api.
There are many examples in in-memory-web-api/src/app.

The End

Thanks for reading this! I hope you find the content somewhat useful.
For more info check both official Angular’s documentation and Angular in-memory-web-api.