I have been looking around trying to find an answer to this problem but I can't, apologies if this has already been asked!
I have created some small angular 9 apps which I am importing into a basic html page using single spa. I have my apps running on different ports locally, my import statement looks like this:
<script type="systemjs-importmap">
{
"imports": {
"footer": "http://localhost:4201/main.js",
"dashboard": "http://localhost:4202/main.js",
"header": "http://localhost:4300/main.js",
"single-spa": "https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.5/system/single-spa.min.js"
}
}
</script>
And I have routes in my html page so that the apps show up on different routes, this is one item from the registration of the applications I am importing:
System.import('single-spa').then(function (singleSpa) {
singleSpa.registerApplication(
'header',
function () {
return System.import('header');
},
function (location) {
return location.pathname.startsWith('/header');
// return true;
}
)
THis all works well and my simple apps show up as they should. The problem arises when I try to add some child pages into my simple apps and route to those in my main "shell" app, if I navigate to "localhost:4200/header", the "header" app I imported shows up correctly. If I try and navigate within that app to a child page, for example this child route I have set up in the "header" app "app-routing-module":
{ path: '**', component: EmptyRouteComponent, children: [
{path: 'sub-details', component: DetailsComponent}
] },
Nothing happens. I have a <router-outlet></router-outlet> on my "header" app's landing page along with a link like this: <a [routerLink]="['./dets']">Dets</a> but instead of routing in the main app to "localhost:4200/header/dets" angular routes to "localhost:4200/dets" which of course doesn't exist. Does anybody have any ideas of what I am missing? Any help would be greatly appreciated!
