single spa won't display two apps at the same time

[JudahMorrison]

I have set up an environment using your repository as a template and I am experiencing strange behavior. I have three apps set up: a navbar app, with two pages of its own, app1 and app2, with several pages to be displayed under the navbar. behavior: localhost:port/ - shows navbar - correct localhost:port/navbarPage - shows navbar and navbar page - correct localhost:port/app1Page - displays only the navbar for several seconds and then switches to showing only the app1Page or vice versa - wrong

What is really strange is that both single spa template divs are displayed and app1Page is inside the navbar div and the app1 div contains an empty app-root element. (see below)

I Noticed you updated the index html to use single-spa-layout, but i am still using the old version FYI. Here is my index.html:

exampleindex.txt

Any help will be appreciated! Thanks!

[joeldenning]

This sounds like single-spa is calling the applications' mount functions, but the apps aren't successfully mounting. This is likely due to the applications being misconfigured somehow, or not using single-spa-angular appropriately. To diagnose, here is something you can run in the browser console:

System.import('single-spa').then(singleSpa => {
  console.log(singleSpa.getAppStatus('App1-App'))
})

If it logs MOUNTED, then that means the root config is correct but that the App1-App is misconfigured.

[JudahMorrison]

I ran the command you gave and it appears that both apps are mounted. In what way could my angular apps be misconfigured? I checked many of the config files in my apps and matched them to the config files in your apps and the seem to be the same. The only difference is the fact that we have multiple pages/routes in our apps using angular router to navigate between them; while you seem to only have one page/route. What kind of routing error could cause this type of behavior? Does single-spa play nicely with angular routes or do my apps need to have only one route?

[joeldenning]

The next steps I would take to debug:

1. Check the Console tab of the browser devtools for any errors.
2. Check the Inspector tab of the browser devtools to look for <div id="single-spa-application:App1-App>

[JudahMorrison]

THANK YOU!!! My problem was my app root selectors were the same across all three apps. I changed them to unique selectors and it worked!

[joeldenning]

Glad to hear you got it working 👍