To enhance my skills, I am exploring various ideas in Angular.
In this particular project, I am working on routing for a feature module that consists of two other feature modules and a shared module.
I initially generated the routing using the CLI command ng g m router --routing and subsequently made manual updates as shown below:
// Routing configuration
// Import statements
const routes: Routes = [
// Specific route configurations
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class RouterRoutingModule { }
// Module configuration
// Import statements
@NgModule({
declarations: [],
imports: [
CommonModule,
RouterRoutingModule
]
})
export class RouterModule { }
After configuring the routing and module, I updated the bootstraping app module manually:
// Bootstraping the AppModule
// Import statements
@NgModule({
declarations: [
// Components declarations
],
imports: [
BrowserModule,
FormsModule,
RouterModule,
Ex500Module
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
The Ex500Module serves as a composed feature module with components for sales and support, both utilizing the shared module.
Despite these configurations, the router-outlet in my main component is not being recognized. Why could this be happening?
https://i.sstatic.net/nRzVX.png
As per my understanding of Angular routing and module handling:
Importing a module involves importing all its exported components. In this case, the RouterModule from @angular/router is exported in RouterRoutingModule, which in turn is imported in the AppModule via RouterModule(./router/router.module). Therefore, all its exported components should be available.