In my Angular 11 application, I am utilizing a named router-outlet. The setup in my app.component.html file looks like this:
<ng-container *ngIf="showGeneric">
<router-outlet name="general">
</router-outlet>
</ng-container>
<ng-container *ngIf="!showGeneric">
<router-outlet name="non-general">
</router-outlet>
</ng-container>
The initial value of showGeneric is set to true in the app.component.ts file.
Furthermore, the routing configuration in my app-routing.module.ts file is defined as follows:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { NonGenericComponent } from './non-generic/main-component/non-generic.component';
import { GenericComponent } from './generic/main-component/generic.component';
const routes: Routes = [
{
path: '',
redirectTo: 'generic',
pathMatch: 'full'
},
{
path: 'generic',
component: GenericComponent,
loadChildren: () => import('./generic/generic.module').then(m => m.GenericModule),
outlet: 'general'
},
{
path: 'non-generic',
component: NonGenericComponent,
loadChildren: () => import('./non-generic/non-generic.module').then(m =>
m.NonGenericModule),
outlet: 'non-general'
},
{
path: '**',
redirectTo: 'generic',
pathMatch: 'full'
}
]
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
However, when attempting to navigate to http://localhost:4200/generic in the local development environment, an error is encountered: Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'generic'. I am currently unable to identify the root cause of this issue. Any assistance in resolving this problem would be greatly appreciated.