typescript - Angular 8 Nästlade rutter och flera router-utgångar fungerar inte

Jag har en enkel Angular 8.3-applikation för tillfället men routningen fungerar inte.

När jag går till /logs har jag inga fel men ingenting visas på skärmen.

När jag går till /logs/detailed/1036 finns det ett fel i konsolen: "Fel: Kan inte matcha några rutter. URL-segment: 'logs/detailed/1036'"

Jag har försökt många olika lösningar som jag hittade på internet, men inget fungerar. Vad missar jag?

Här är ett enkelt träd av min applikation:

/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>

logg-sida.modul.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 { }

logg-sida.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>

Svar #1

Lösning 1

Försök utan en namngiven routerutgång. Finns det någon specifik anledning till att du använder en namngiven utgång? Det finns ett känt fel som säger att lazy loading och namngivna utgångar inte fungerar bra tillsammans.

Du behöver inte ett namngivet uttag för att ha nästlade routeruttag. Du behöver dem bara om de är i samma komponent och du praktiskt taget vill exponera två olika komponenter på samma plats, utan att den ena är barn till den andra.

Lösning 2

Om den namngivna routerutgången är det enda alternativet, finns det ett annat svar här som kan fungera för dig. Kolla den detaljerade lösningen här

Svar #2

Jag gjorde några ändringar och det fungerar bättre, men det finns fortfarande ett problem.

Här är min app-routing.module.ts =

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

Och här är min log-page-routing.module.ts

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

Jag kan så loggarna korrekt men när jag går till logs/detailed finns fortfarande detta fel: "Fel: Kan inte matcha några rutter. URL-segment: 'logs/detailed/'"

Relaterade artiklar