Angular 10 components not loading in router-outlet

Question

While building a new app in Angular 10 I am facing the problem of my components not loading like I expect them to.

StackBlitz

The boilerplate code is more or less directly copied from another project I made in Angular 9 where it works perfectly fine, although I seem to remember facing a similar issue at some point, but cannot remember the solution.

The problem in short
Only the AppComponent is loading. This component has a router-outlet which should load ShellComponent and children thereof injected via the ShellService.

The URL redirect works, as I am being redirected to /cases/current on startup as expected, so I know that all modules are loaded correctly.

What I have tried/researched

I looked through the documentation for Angular 10 to see if there were any changes from version 9 that might cause this, but was unable to find anything that seemed relevant.

I tried disabling Ivy, disabling AOT and disabling build optimizations to see if it made any difference - which it did not.

I also tried exporting the ShellComponent from the ShellModule and load it directly in the AppComponent HTML, which resulted in the ShellComponent showing up, but still no child components.

Final resolution
Thanks to the answers below I was able to create a solution that works. StackBlitz link for anyone interested.

Answer 1

The first issue is that you are not routing or placing the shell component anywhere. You can replace router-outlet with <app-shell></app-shell> in the app.component.html. You will need to export the shell component from the module if you chose to do it this way. Alternatively, you can route to shell the way Alejandro Camba describes in another answer.

The second problem is that you did not import the routes to the app module, so even though you are routing to cases/current, nothing was registered with the router to load the current-cases component. The best practice is to lazy load feature routes in app-routing.module.ts

const routes: Routes = [
  {
    path: 'cases',
    loadChildren: () => import('./cases/cases.module').then(m => m.CasesModule)
  },
  { path: '**', redirectTo: '', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { enableTracing: false })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Then, you can update the routing for the Cases module to include the current cases component route:

const routes: Routes = [
  { path: '', redirectTo: 'current', pathMatch: 'full' },
  {
    path: 'current',
    component: CurrentCasesComponent,
  },
];

This works because the "cases" routes to the cases module, and the "current" will route to the CurrentCasesComponent.