single-spa-angular Multiple routes in a microfrontend application are not working when we refresh the browser (GitHub code is available)

Question

Can someone help me out on this? any help would be greatly appreciated . I have a simple angular application with multiple routes mentioned below

1. App1Route1
2. App1Route2
3. App1Route2

and I have a main app component which uses to display these routes

I wanted to implement single-spa-angular for this application and I followed the steps which is mentioned in this link and made couple of changes in the app-routing-module.ts file as per the suggestion.

After made these changes I will be able to run the application with single-spa like below

But the routing is not working . Finally I had fixed the issue by modifying the app.routing.module.ts file like below

Now I can see the output when I navigate the routes using the links

Now The Issue I am having is , When I refresh the page in the browser with the route-names it is not working and getting a blank page (which is working fine with normal angular application)

Entire Code and steps to reproduce this error is uploaded in https://github.com/SivaAsDeveloper/single-spa-multiple-routes

Answer 1

In your layout definition you need to create a corresponding route for each one you have in angular. When you refresh the page single-spa tries to import an application based on the current path and it won't find anything that matches. So something like this should work:

<route path="/app1">
  <application name="app1"></application>
</route>
<route path="/app1/route1">
  <application name="app1"></application>
</route>
<route path="/app1/route2">
  <application name="app1"></application>
</route>

What lead me to this question is I'm trying to find a simpler way to implement this.

Answer 2

I am not sure if the issue is similar as I have faced in my application. I faced a 404 Page not found, issue when I refresh the browser tab.

I have used the below(in the reference comment) server configuration in the .htaccess file at the location where the application files are hosted. Also, I have fixed the authentication flow in my application which in turn has fixed the 404 error. Again, Not sure which change has actually solved my issue. Hope this can help you as well.

Reference

Thanks.