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.

The router-outlet should not be wrapped in any conditional statements, the showing/hiding destroys the DOM element and can mess up the navigations.

Instead use [hidden] hides the element but does not destroy the element.

<div [hidden]="loading()"> 
  <router-outlet></router-outlet>
</div>

Stackblitz Demo