I am currently working on an Angular 8.3 application, but I am facing issues with the routing functionality.
When navigating to /logs, there are no errors displayed on the screen.
However, accessing /logs/detailed/1036 results in a console error: "Error: Cannot match any routes. URL Segment: 'logs/detailed/1036'".
Despite trying various solutions found online, I am unable to resolve the issue. What could I be overlooking?
Below is a basic hierarchy 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>