Angular module loading children, child route is not initialising on router.navigate

The app loads app.module where I give it a route:

export const routes: Routes = [
{
path: '',
resolve: { mockData: MockApiResolver },
loadChildren: () => import('./shared-components/initilisation/initilisation.module').then(m => m.InitilisationModule)
},
{ path: 'error', component: ErrorComponent, data: { title: 'Generic error' } },
{ path: '**', component: ErrorComponent, data: { title: '404 not found' } }
];


The route is given data and loads children of the initilisation.module. This module also has children:

const routes: Routes = [
{
path: "",
component: InitilisationComponent,
children: [
{
path: 'options',
loadChildren: () => import('../../view-components/options/options.module').then(m => m.OptionsModule)
},
]
}
];


This creates the route '/options' where I then navigate to it in the initilisation.component:

constructor() {
this.route.parent?.data.subscribe(data => {
const response = data['mockData'];

if (response) {
console.log(response)
this.router.navigate([response.path]).then(() => {
// Handle successful navigation if needed
console.log("route successful")
}).catch(err => {
console.error('Navigation error:', err);
});
}
});
}


The route is working in the URL, but the component does not load. I cant seem to figure out why? Any help appreciated, here is a stackBlitz of the app.

My thoughts are that the route is not created in time to navigate to it, but I put a timeout around the navigate and that didn't do anything.

The idea is to get a route from the BE, and navigate to that said route on app initialisation.

Continue reading...