Proxy issue when navigating from micro apps to other micro app in Single-spa Angular application

Question

I am working in micro front end approach using single-spa-angular framework.I have a root container application which runs in 4200 port and 2 micro apps say app1 @5201 and app2 @ 4201 port. I am not facing any issues with app2 and its working perfectly as per micro front end approach.

In app1, I have a login component and dashboard component. so when i hit the app1 it hits the login component first (desired flow: it has to check the user profile and authenticate and based on the result it will navigate to dashboard component). For checking this user profile in app1, I am running backend services using application server (which runs @8443 port) and proxy is configured in proxy config.json like this: { "/app1/*": { "target": "http://localhost:8443/", "secure": false } } and during npm start in app1 it picks up this statement ( --proxy-config proxy.conf.json) from package .json and this is how we configure proxy for backend services in app1.

Now,coming to micro front end, when I hit app1 from root container, I am getting an access denied image instead of dashboard. Internally ,It hits the login component of app1, when I see the network tab, it hits the user-profile method with the 200k status, but the response is the whole html (whatever i have given in index.html of root container) and an access denied image is called and rendered.It is not hitting the backend server itself.

But when I hit http://localhost:5201/app1/app1/app1-user-profile, I am able to see the desired response in the browser.so what is preventing me to get dashboard of app1 when i route from other apps/4200 port?

Can anyone please guide me in this regard? should i need to configure Proxy settings in root container and other micro apps as well ? Can single-spa help me in this proxy configuration?

Answer 1

I had the same problem , my solution was to configure the proxy in the root application, in my case it was a webpack dev configuration.

It is because all the routes which are not defined explicitely in the route component of your "subapp" are redirected by the root application.

Here is my webpack config with the proxy for example https://github.com/milobella/application-web/blob/master/portal/webpack.dev.js

Answer 2

• If you are facing issues in handling proxy inside single-spa angular and your are coming from angular background, trying your app migrate to the micro frontend or working with single-spa , here is the solution which will work like a charm.

• Remind that, we cannot serve proxy.config.json just like we used to do in our angular app.

Here, we need to take of proxy config inside the webpackconfig.js of our host or shell or root-config app.

Here is an example,

• For better idea, refer my blog : How to handle proxy inside single-spa angular

• official docs : Webpack proxy configuration