Mock HTTP responses with Angular

• Intro
• Code demos
• Preferred solution
• Other possible solutions
  • Angular HTTP interceptors
  • Mock Service Worker comparison with similar tools
• Learn more
  • Angular proxying support
  • Webpack dev-server middleware
  • Mock Service Worker
  • Angular HTTP interceptors

Intro

I was working on an Angular project with micro frontends using Webpack Module Federation where I was building a page that had to load two micro frontends.

Whilst working on developing this page, the way I was dealing with the API requests from the micro frontends was by using Angular's proxying support to forward them to the APIs that were deployed on a non-prod environment or to local running instances.

I was facing a few issues with the above approach:

• Sometimes the non-prod APIs had issues/downtime and it affected the local development of the page.
• The API requests were taking some non-negligible time to complete. This slowed down the development of the page and was painful for the dev loop experience.
• Some API requests require authentication and there was no easy way to provide it. Note that this was doable, I could go through the steps to get the required authentication headers and send them with the API requests using Angular's proxying support but it was still a cumbersome process.
• It's cumbersome having to start local versions of the APIs whenever I didn't want/couldn't use the non-prod APIs.
• Sometimes I wanted to test scenarios for the development of the page which depended on the data returned from the API requests. This was not only a cumbersome process but it was also an impossible one depending on the scenario I wanted to simulate.

Note

It's also important to remember that a lot of the changes needed to do on the page were non-dependent on the API requests from the micro frontends, such as style changes, but the app wouldn't even start/work properly if those API requests fail.

This repo is the result of investigating ways to provide a solution for this problem by providing a way to control the returned HTTP responses.

Code demos

Demo	Description
angular-proxy-bypass	Shows how to use Angular's proxying support to return mocked HTTP responses.
webpack-dev-server-middleware	Shows how to add a middleware to Webpack's dev-server to return mocked HTTP responses.
mock-service-worker	Shows how to use msw to return mocked HTTP responses.

Preferred solution

I believe msw is the best option for mocking HTTP responses. You can even use it for other scenarios, such as unit tests.

For the scenario I described in the intro section I ended up using both msw and Angular Proxy. I setup my Angular app so that it had two development configurations and also made use of an environment variable that controlled whether or not the msw worker would start:

• npm run start:with-mocks which did ng serve --configuration api-mocks and set to true the environment variable to start the msw worker: when the app was started with this command, the API requests would return mocked responses with msw.
• npm run start:with-proxy which did ng serve --configuration api-proxy and set to false the environment variable to start the msw worker: when the app was started with this command, the API requests would be proxied using Angular's proxy support.

Other possible solutions

Angular HTTP interceptors

You could use Angular HTTP interceptors to return mocked responses based on some environment variable.

Note

I couldn't get this solution to work for my scenario which used Webpack Module Federation. I added an HTTP interceptor in the app that was loading the two micro frontends but I couldn't get the interceptor to intercept any of the HTTP requests from the remotely loaded micro frontends.

This is probably feasable but I didn't dig more into it. I belive it would require a certain setup in making sure the HttpClient is a singleton across the micro frontends. For more info see the links in the learn more section about Angular HTTP interceptors.

Mock Service Worker comparison with similar tools

The Mock Service Worker documentation page comparing msw with other tools shows not only a lot of alternative tools you can use but it also compares them to msw.

Learn more

The following links were helpful whilst researching the solutions provided in this repo:

• 4 Ways to Mock Backend Responses in Angular

Angular proxying support

• How to proxy HTTP requests in Angular
• Angular docs: Proxying to a backend server
• Angular docs: Bypass the proxy
• webpack/webpack-dev-server#829
• stackoverflow: Angular proxy bypass intercepts all requests regardless of path
• stackoverflow: How do you return data to your Angular app using proxy.conf.json?
• Webpack docs: dev-server proxy
• Mastering Angular proxy configuration
• chimurai/http-proxy-middleware

Webpack dev-server middleware

• webpack/webpack-dev-server
• webpack/webpack-dev-middleware
• webpack/webpack-dev-server#4129

Mock Service Worker

• Stop mocking fetch
• https://mswjs.io/ and it's Getting started guide
• mswjs/msw
• mswjs/examples
• mswjs/msw#887

Angular HTTP interceptors

• Angular docs: HTTP - Intercept requests and responses
• Angular docs: HTTP - interceptor use-cases
• stackoverflow: interceptor in angular and module federation
• stackoverflow: How to import Angular HTTP interceptor only for Child module
• stackoverflow: Angular Microfrontend with Module Federation intercept HTTP request in host application
• angular/angular/#36974: Extend http interceptors in child module injector #36974