Angular Routing: correct way of redirecting to 404 page for nested routes-CodePudding

In my Angular application every feature has their own feature-routing.module.ts, and then feature.module.tsis imported to app.module.ts. It is actually directing to not-found page, but it is not redirecting to /select-fund when path is ''.

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 modules routing structure same as this.

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],
      },
    ]
  },

CodePudding user response：

Make couple of changes

app-routing.module.ts

const routes: Routes = [
  { path: '',  
    children: [{
      path: '',
      loadChildren: () => import('YOUR_AUTH_MODULE_ROUTING_FILE_PATH/auth.routing.module.ts').then(m => m.AuthModule)
    }]
  },
  { path: 'translate',   component: TranslateComponent, pathMatch: 'full' },
  { path: '**', redirectTo: '/not-found', pathMatch: 'full' },
];

auth.routing.module.ts

const routes: Routes = [
 ... other routes
  ,{
    path: '',
    redirectTo: '/select-fund', 
    pathMatch: 'full'
  },
  {
    path: 'select-fund',
    component: SelectFundComponent,
    canActivate: [AuthGuard, GatingGuard],
  }
}],

CodePudding user response：

I'm not sure if your solution is correct, maybe you should do it this way:

const routes: Routes = [
  { path: '',   redirectTo: '/select-fund', pathMatch: 'full' },
  { path: 'translate',   component: TranslateComponent, pathMatch: 'full' },
  { path: 'select-fund', loadChildren: () => import("your path to module").then(m => m.FeatureModule), 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 { }