How to use a secondary router outlet without ng modules correctly to enable page reload by url?

How to use a secondary router outlet without ng modules correctly enabling page reload by url?

I have an app component with a router:

<main>
<router-outlet></router-outlet>
</main>


I have primary routes:

export const routes: Routes = [
{
path: 'landing',
loadChildren: () => import('./features/landing/landing.routes').then(m => m.LANDING_ROUTES)
},
]


I have a landing component with a secondary router:

<main class="container">
<!-- Navigation buttons -->
<nav>
<a routerLink="sign-up">Sign Up</a>
<a routerLink="sign-in">Sign In</a>
</nav>

<!-- Router outlet for sign-in/sign-up components -->
<router-outlet></router-outlet>
</main>


And my landing routes:

export const LANDING_ROUTES: Routes = [
{
path: '',
component: LandingPageComponent,
children: [
{
path: '',
component: SignUpComponent
},
{
path: 'sign-up',
component: SignUpComponent
},
{
path: 'sign-in',
component: SignInComponent
},
{
path: '**',
redirectTo: ''
}
]
}
];


The in-app navigation, e.g. the navigation in the landing component, works fine.

Loading a url from the primary router via the router (or typing it) - for example http://localhost:4200/landing works fine, too.

However, if I want to type a secondary route (e.g. http://localhost:4200/landing/sign-up it throws an error:

Refused to apply style from 'http://localhost:4200/landing/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
sign-up:2


GET http://localhost:4200/landing/polyfills.js net::ERR_ABORTED 404 (Not Found)
sign-up:2

GET http://localhost:4200/landing/main.js net::ERR_ABORTED 404 (Not Found)


This error is caused by the fact that the secondary router tries to find the styles.css and main.js file but can not find them since they are located on the root of the primary folder (e.g. http://localhost:4200/ instead of http://localhost:4200/landing/ as far as I understand.

So how can I make the url addressbar work without ng modules? What is the best practice? Can I somehow configure the secondary router or do I have to use named routers with a () syntax?

For completeness, the appConfig and index.html:

export const appConfig: ApplicationConfig = {
providers: [
provideRouter(routes)],
};


<base href="/">

<app-root></app-root>

Continue reading...