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

I have set up an environment using single spa and I am experiencing strange behavior. I have three angular apps set up: a navbar app, with two pages of its own, app1 and app2, with several pages to be displayed under the navbar. I was using this repository as a model: https://github.com/joeldenning/coexisting-angular-microfrontends . I understand the repository was changed three days ago, I am using the previous commits as a model.

behavior: localhostort/ - shows navbar - correct

localhostort/navbarPage - shows navbar and navbar page - correct

localhostort/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)

example of error...

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:

<!DOCTYPE html>

<html>
<head>
<meta
http-equiv="Content-Security-Policy"
content="default-src * data: blob: 'unsafe-inline' 'unsafe-eval'; script-src * 'unsafe-inline' 'unsafe-eval'; connect-src * 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; frame-src *; style-src * data: blob: 'unsafe-inline'; font-src * data: blob: 'unsafe-inline';"
/>

<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<title>Your application</title>

<meta name="viewport" content="width=device-width, initial-scale=1" />

<meta name="importmap-type" content="systemjs-importmap" />

<!-- "Landing-App": "http://localhost:4203/landing", -->

<script type="systemjs-importmap">
{
"imports": {
"App1-App": "http://localhost:4201/main.js",

"App2-App": "http://localhost:4202/main.js",

"Navbar-App": "http://localhost:4300/main.js",

"single-spa": "https://cdnjs.cloudflare.com/ajax/libs/single-spa/5.5.0/system/single-spa.min.js"
}
}
</script>

<link
rel="preload"
href="https://cdnjs.cloudflare.com/ajax/libs/single-spa/5.5.0/system/single-spa.min.js"
as="script"
crossorigin="anonymous"
/>

<script src="https://unpkg.com/core-js-bundle@3.1.4/minified.js"></script>

<script src="https://unpkg.com/zone.js"></script>

<script src="https://unpkg.com/import-map-overrides@1.15.1/dist/import-map-overrides.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/4.0.0/system.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/4.0.0/extras/amd.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/4.0.0/extras/named-exports.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/4.0.0/extras/named-register.min.js</script>
</head>
<body>
<script>

System.import("single-spa").then(function (singleSpa) {
singleSpa.registerApplication(

"Navbar-App",
function () {
return System.import("Navbar-App");
},

function (location) {
return true;
}
);

singleSpa.registerApplication(
"App1-App",

function () {
return System.import("App1-App");
},

function (location) {
return location.pathname.startsWith("/app1");
}
);

singleSpa.registerApplication(
"App2-App",

function () {
return System.import("App2-App");
},

function (location) {
return location.pathname.startsWith("/app2");
}
);

singleSpa.start();
});
</script>
<import-map-overrides-full></import-map-overrides-full>
</body>
</html>


Any help will be appreciated! Thanks!

Continue reading...