Skip to content

edumserrano/angular-mock-http-responses

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 

Repository files navigation

Mock HTTP responses with Angular

Build the demo apps Markdown link check

License: MIT GitHub Sponsors LinkedIn

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:

Angular proxying support

Webpack dev-server middleware

Mock Service Worker

Angular HTTP interceptors