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

问题

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>

回答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

回答2:

I made a few change and it works better but there is still an issue.

Here is my app-routing.module.ts =

{ path: '', redirectTo: 'logs', pathMatch: 'full'},
{ path: 'logs', component: LogPageComponent , loadChildren: () => import(`./log-page/log-page.module`).then(m => m.LogPageModule)}

And here is my log-page-routing.module.ts

{ path: '', outlet: 'log-page', component: LogTableComponent },
{ path: 'detailed', outlet: 'log-page', component: DetailedLogComponent }

I'm able to seed the logs correctly but when I go to logs/detailed there is still this error : "Error: Cannot match any routes. URL Segment: 'logs/detailed/"

来源：https://stackoverflow.com/questions/58954703/angular-8-nested-routes-and-multiple-router-outlet-doesnt-work

标签

angular

typescript

routing