In this tutorial, we’ll learn, with a quick example, how to mock a REST API back-end for your Angular 10/9 application which you can consume using Angular 10 HttpClient even before your real back-end is ready.

We’ll use two powerful open source packages, json-server and faker.js and we assume that you have an Angular project ready.

Please note that both json-server and faker.js are framework agnostic i.e you can use them with any JavaScript framework such as Vue.js or React but in this example we’ll use them in the context of an Angular project.

Why Mocking a Back-End for your Angular 10 App?

More often than not, modern web development involves multiple developers working in separate front-end and back-end applications. This approach has many advantages, such as the separation of concerns but also introduces a few challenges such as the difficulties in coordination between the front-end and back-end developers. Here comes the role of tools such as JSON-Server to ease these difficulties. As a front-end developer, JSON-Server is such a great tool that allows you to spin up a REST API server with a fully-working API with zero coding.

Read to build a real REST API example or also this tutorial which implements a TypeScript/Node.js REST API with JWT Auth. But, as far as Angular concerned, there is no difference between consuming a mocked or real REST API.

#angular