Angular 8 Nested routes and multiple router outlet doesn't work

Question

I have a simple angular 8.3 application for now but the routing does not work.

When I go to /logs I have no errors but nothing is displayed to the screen.

When I go to /logs/detailed/1036 there is an error in the console : "Error: Cannot match any routes. URL Segment: 'logs/detailed/1036'"

I tried a lot of differents solution that I found on internet but nothing works. What am I missing ?

Here is a simple tree of my application :

/app
- app.module.ts
- app-routing.module.ts
- app.component.html
      /log-page
      - log-page.module.ts
      - log-page-routing.module.ts
      - log-page.component.html

app.module.ts

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      HttpClientModule,
      AppRoutingModule,
      SharedModule,
      LogPageModule,
      ToastrModule.forRoot(),
      TabMenuModule
   ],
   providers: [],
   bootstrap: [
      AppComponent,
   ]
})
export class AppModule { }

app-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: 'logs', pathMatch: 'full'},
  { path: 'logs',  loadChildren: () => import(`./log-page/log-page.module`).then(m => m.LogPageModule)},
];

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

app.component.html

<app-header></app-header>
<p-tabMenu [model]="navigationItems"></p-tabMenu>
<router-outlet></router-outlet>

log-page.module.ts

@NgModule({
  imports: [
    CommonModule,
    SpinnerModule,
    MenuModule,
    FormsModule,
    ButtonModule,
    TableModule,
    InputTextModule,
    SharedModule,
    LogPageRoutingModule
  ],
  declarations: [
    LogPageComponent,
    FilterBarComponent,
    LogTableComponent,
    DetailedLogComponent,
    ErrorStatusComponent
],
  providers: [
    FilterSettingsService
  ]
})
export class LogPageModule { }

log-page-routing.module.ts

const routes: Routes = [
    {
        path: '', outlet: 'log-page', component: LogTableComponent, children: [
            {
                path: 'detailed/:logId', outlet: 'log-page', component: DetailedLogComponent
            }, {
                path: '**', redirectTo: '', pathMatch: 'full'
            }
        ]
    }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class LogPageRoutingModule { }

log-page.component.ts

<div class="p-grid ">
    <div class="p-col-fixed" style="width: 200px;">
        <app-error-status></app-error-status>
    </div>
    <div class="p-col">
        <router-outlet name="log-page"></router-outlet>
    </div>
</div>

Answer 1

Solution 1

Try without a named router outlet. Is there any specific reason why you are using a named outlet? There is a known bug that says that lazy loading and named outlets don't work well together

You don't need a named outlet to have nested router outlets. You only need them if they are in the same component and you want to practically expose two different components in the same place, without one being the child of the other.

Solution 2

If named router outlet is the only way to go, there is another answer here that might work for you. Check detailed solution here