Adding proxy config to the single spa angular

• In this post, I am going to explain how you can configure proxy for interacting your backend api from your angular front end services.

Common proxy config in an angular app

• while working with angular application, We always create proxy.config.json file and will serve the proxy config while application running.

• But, why does the same config fail when we run single spa (micro-frontend) angular app?

1. Because, We are building our angular application using webpack.
2. While serving application, we are sharing our application as a remote module or component or library in different port which need to be consumed by host/shell/root-config.
3. Let say, your are serving your angular app in port 5000 and the host is running in port 7000.4 . You need to register your angular app port with host port by using system-importmap and registerApplication()5 . As we know, single-spa host app here is going to route the other micro-frontend apps, we need to handle proxy inside webpack.config.js file
4. Inside the webpack.config.js, we have add proxy config and then re-run the host

webpack.config.js

For reference click here Webpack Proxy.

Thanks for reading :)