Microfront single-spa deployment issue/Clarification

Question

Intro:-
We are new to MicroFrontEnd Architecture and we have chosen single-spa framework for this. We are building the front end applications using Angular 10.

Issue:-
After we built all the micro front end applications and deployed into IIS Windows server ( Manual Deployment only ) , The Application is not working when we type manually the route information (http://10.XX.XXXX.X/Accounts ,http://10.XX.XXXX.X/Cards,http://10.XX.XXXX.X/Loans etc. etc.). But the same can be accessed without any issue when we access via menus inside the application (Please see the below picture and we are not having issue when we click the red box numbers [from 1 to 7])

Clarifications

1. Is it possible to host all the micro front end and container root application in a same port ?
2. Why all the micro front end applications are working fine when a user clicks on the hyperlinks in the container application but not typing / refreshing from the browser ?

Answer 1

We have also been trying to implement this single spa in angular. Unfortunately the single spa angular docs are of no use. From the knowledge that we have garnered I can tell you that

1. No you cannot run multiple applications on one port.
2. All application will run through the container app, i think that's the whole point of the container app. It will not run individually, for testing it locally you can use a firefox/chrome plugin. check the below link:

https://single-spa.js.org/docs/devtools/, this way you can force your app to render