{"id":24224595,"url":"https://github.com/edumserrano/angular-mock-http-responses","last_synced_at":"2025-03-04T02:44:21.168Z","repository":{"id":205529518,"uuid":"714409389","full_name":"edumserrano/angular-mock-http-responses","owner":"edumserrano","description":"Different ways to mock HTTP responses on Angular apps.","archived":false,"fork":false,"pushed_at":"2024-12-07T10:48:26.000Z","size":1020,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-14T07:17:46.323Z","etag":null,"topics":["angular","angular-proxy","http","mock","mock-http","mock-service-worker","msw","webpack-dev-middleware","webpack-dev-server"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/edumserrano.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"edumserrano"}},"created_at":"2023-11-04T20:17:01.000Z","updated_at":"2024-09-07T10:59:55.000Z","dependencies_parsed_at":"2024-02-01T11:45:54.591Z","dependency_job_id":"85deb8b1-9087-4f5a-addd-5dcd41d974ed","html_url":"https://github.com/edumserrano/angular-mock-http-responses","commit_stats":null,"previous_names":["edumserrano/angular-mock-http-responses"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edumserrano%2Fangular-mock-http-responses","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edumserrano%2Fangular-mock-http-responses/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edumserrano%2Fangular-mock-http-responses/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edumserrano%2Fangular-mock-http-responses/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/edumserrano","download_url":"https://codeload.github.com/edumserrano/angular-mock-http-responses/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241773254,"owners_count":20018064,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-proxy","http","mock","mock-http","mock-service-worker","msw","webpack-dev-middleware","webpack-dev-server"],"created_at":"2025-01-14T07:17:50.620Z","updated_at":"2025-03-04T02:44:21.146Z","avatar_url":"https://github.com/edumserrano.png","language":"JavaScript","funding_links":["https://github.com/sponsors/edumserrano"],"categories":[],"sub_categories":[],"readme":"# Mock HTTP responses with Angular\n\n[![Build the demo apps](https://github.com/edumserrano/angular-mock-http-responses/actions/workflows/build.yml/badge.svg)](https://github.com/edumserrano/angular-mock-http-responses/actions/workflows/build.yml)\n[![Markdown link check](https://github.com/edumserrano/angular-mock-http-responses/actions/workflows/markdown-link-check.yml/badge.svg)](https://github.com/edumserrano/angular-mock-http-responses/actions/workflows/markdown-link-check.yml)\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE)\n[![GitHub Sponsors](https://img.shields.io/github/sponsors/edumserrano)](https://github.com/sponsors/edumserrano)\n[![LinkedIn](https://img.shields.io/badge/LinkedIn-Eduardo%20Serrano-blue.svg)](https://www.linkedin.com/in/eduardomserrano/)\n\n- [Intro](#intro)\n- [Code demos](#code-demos)\n- [Preferred solution](#preferred-solution)\n- [Other possible solutions](#other-possible-solutions)\n  - [Angular HTTP interceptors](#angular-http-interceptors)\n  - [Mock Service Worker comparison with similar tools](#mock-service-worker-comparison-with-similar-tools)\n- [Learn more](#learn-more)\n  - [Angular proxying support](#angular-proxying-support)\n  - [Webpack dev-server middleware](#webpack-dev-server-middleware)\n  - [Mock Service Worker](#mock-service-worker)\n  - [Angular HTTP interceptors](#angular-http-interceptors-1)\n\n## Intro\n\nI was working on an Angular project with micro frontends using [Webpack Module Federation](https://github.com/edumserrano/webpack-module-federation-with-angular) where I was building a page that had to load two micro frontends.\n\nWhilst 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](https://angular.io/guide/build#proxying-to-a-backend-server) to forward them to the APIs that were deployed on a non-prod environment or to local running instances.\n\nI was facing a few issues with the above approach:\n\n- Sometimes the non-prod APIs had issues/downtime and it affected the local development of the page.\n- 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.\n- 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.\n- It's cumbersome having to start local versions of the APIs whenever I didn't want/couldn't use the non-prod APIs.\n- 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.\n\n\u003e [!NOTE]\n\u003e\n\u003e 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.\n\u003e\n\n**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.**\n\n## Code demos\n\n| Demo                                                                                 | Description                                                                                                                                 |\n| :----------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------ |\n| [angular-proxy-bypass](/code-demos/angular-proxy-bypass/README.md)                   | Shows how to use [Angular's proxying support](https://angular.io/guide/build#proxying-to-a-backend-server) to return mocked HTTP responses. |\n| [webpack-dev-server-middleware](/code-demos/webpack-dev-server-middleware/README.md) | Shows how to add a middleware to [Webpack's dev-server](https://github.com/webpack/webpack-dev-server) to return mocked HTTP responses.     |\n| [mock-service-worker](/code-demos/mock-service-worker/README.md)                     | Shows how to use [msw](https://mswjs.io/) to return mocked HTTP responses.                                                                  |\n\n## Preferred solution\n\nI believe [msw](https://mswjs.io/) is the best option for mocking HTTP responses. You can even use it for other scenarios, such as [unit tests](https://kentcdodds.com/blog/stop-mocking-fetch).\n\nFor the scenario I described in the [intro section](#intro) I ended up using both msw and [Angular Proxy](https://medium.com/ngconf/how-to-proxy-http-requests-in-angular-f873183880a4). I setup my Angular app so that it had two [development configurations](https://angular.io/guide/workspace-config#alternate-build-configurations) and also made use of an [environment variable](https://angular.io/guide/build) that controlled whether or not the msw worker would start:\n\n- `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.\n- `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.\n\n## Other possible solutions\n\n### Angular HTTP interceptors\n\nYou could use [Angular HTTP interceptors](https://angular.io/guide/http-intercept-requests-and-responses) to return mocked responses based on some environment variable.\n\n\u003e [!NOTE]\n\u003e\n\u003e 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.\n\u003e\n\u003e 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](#angular-http-interceptors-1) about Angular HTTP interceptors.\n\u003e\n\n### Mock Service Worker comparison with similar tools\n\nThe Mock Service Worker documentation page [comparing msw with other tools](https://mswjs.io/docs/comparison) shows not only a lot of alternative tools you can use but it also compares them to msw.\n\n## Learn more\n\nThe following links were helpful whilst researching the solutions provided in this repo:\n\n- [4 Ways to Mock Backend Responses in Angular](https://javascript.plainenglish.io/mock-backend-responses-in-angular-320694a515c)\n\n### Angular proxying support\n\n- [How to proxy HTTP requests in Angular](https://medium.com/ngconf/how-to-proxy-http-requests-in-angular-f873183880a4)\n- Angular docs: [Proxying to a backend server](https://angular.io/guide/build#proxying-to-a-backend-server)\n- Angular docs: [Bypass the proxy](https://angular.io/guide/build#bypass-the-proxy)\n- webpack/webpack-dev-server#829\n- stackoverflow: [Angular proxy bypass intercepts all requests regardless of path](https://stackoverflow.com/questions/69906702/angular-proxy-bypass-intercepts-all-requests-regardless-of-path)\n- stackoverflow: [How do you return data to your Angular app using proxy.conf.json?](https://stackoverflow.com/questions/49443750/how-do-you-return-data-to-your-angular-app-using-proxy-conf-json)\n- Webpack docs: [dev-server proxy](https://webpack.js.org/configuration/dev-server/#devserverproxy)\n- [Mastering Angular proxy configuration](https://jmrobles.medium.com/mastering-angular-proxy-configuration-6c8df0b175fe)\n- [chimurai/http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware)\n\n### Webpack dev-server middleware\n\n- [webpack/webpack-dev-server](https://github.com/webpack/webpack-dev-server)\n- [webpack/webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware)\n- webpack/webpack-dev-server#4129\n\n### Mock Service Worker\n\n- [Stop mocking fetch](https://kentcdodds.com/blog/stop-mocking-fetch)\n- [https://mswjs.io/](https://mswjs.io/) and it's [Getting started](https://mswjs.io/docs/getting-started) guide\n- [mswjs/msw](https://github.com/mswjs/msw)\n- [mswjs/examples](https://github.com/mswjs/examples)\n- mswjs/msw#887\n\n### Angular HTTP interceptors\n\n- Angular docs: [HTTP - Intercept requests and responses](https://angular.io/guide/http-intercept-requests-and-responses)\n- Angular docs: [HTTP - interceptor use-cases](https://angular.io/guide/http-interceptor-use-cases)\n- stackoverflow: [interceptor in angular and module federation](https://stackoverflow.com/questions/76184144/interceptor-in-angular-and-module-federation)\n- stackoverflow: [How to import Angular HTTP interceptor only for Child module](https://stackoverflow.com/questions/53305685/how-to-import-angular-http-interceptor-only-for-child-module)\n- stackoverflow: [Angular Microfrontend with Module Federation intercept HTTP request in host application](https://stackoverflow.com/questions/72358529/angular-microfrontend-with-module-federation-intercept-http-request-in-host-appl)\n- angular/angular/#36974: [Extend http interceptors in child module injector #36974](https://github.com/angular/angular/issues/36974)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedumserrano%2Fangular-mock-http-responses","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fedumserrano%2Fangular-mock-http-responses","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedumserrano%2Fangular-mock-http-responses/lists"}