I have structured my Angular application so that each feature has its own feature-routing.module.ts. These modules are then imported into the main app.module.ts. However, I am facing an issue where the application is not redirecting to /select-fund when the path is empty.
app-routing.module.ts
const routes: Routes = [
{ path: '', redirectTo: '/select-fund', pathMatch: 'full' },
{ path: 'translate', component: TranslateComponent, pathMatch: 'full' },
{ path: '**', redirectTo: '/not-found', pathMatch: 'full' },
]; // sets up routes constant where you define your routes
// configures NgModule imports and exports
@NgModule({
imports: [RouterModule.forRoot(routes, { enableTracing: false })],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.module.ts
@NgModule({
declarations: [
AppComponent,
LoaderComponent,
],
imports: [
NotFoundModule,
DashboardModule,
SubscriptionModule,
DataroomModule,
TaxDocumentsRefreshModule,
HttpClientModule,
OnboardingModule,
AppRoutingModule,
],
providers: [
ErrorHandleService,
HttpClient,
{provide: RouteReuseStrategy, useClass: RouteReusableStrategy},
{provide: ErrorHandler, useValue: Sentry.createErrorHandler()},
{provide: HTTP_INTERCEPTORS, useClass: HTTPForbiddenInterceptor, multi: true},
],
bootstrap: [AppComponent]
})
export class AppModule { }
not-found-routing.module.ts every module's routing follows a similar structure.
const routes: Routes = [
{
path: '',
component: LoggedOutLayoutComponent,
children: [
{
path: 'not-found',
component: NotFoundComponent
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class NotFoundRoutingModule { }
auth.routing.module.ts
const routes: Routes = [
... other routes
,{
path: '',
component: DashboardWideLayoutComponent,
children: [
{
path: 'select-fund',
component: SelectFundComponent,
canActivate: [AuthGuard, GatingGuard],
},
]
},