CODEWITHSUNDEEP
angularmoduleroutes
Scott
Scott

Reputation: 505

How to add page not found route with feature modules

We have Angular application modules where each application is responsible to defining their routes. This all works fine except we would also like a page not found route.

{ path: '**', component: PageNotFoundComponent }

What is the best practice for adding this route last. In other words each application module would not define it, is there a way to add it after all feature modules have loaded their routes?

My app-module-router.ts looks like this:

const routes: Routes = [
  { path: '', children: [

  { path: '', redirectTo: '/pleaseSelect', pathMatch: 'full' },  
  { path: 'restricted', component: AuthorityRestrictedComponent,
     data: { title : 'Restricted'},  canActivate: [AuthorityChecker] },
  { path: 'pleaseSelect', component: PleaseSelectComponent,
     data: { title : 'Please Select'},  canActivate: [AuthorityChecker] },
  { path: 'notAuthorized', component: NotAuthorizedComponent,
    data: { title : 'Not Authorized'},  canActivate: [AuthorityChecker] }
  ], resolve: {translation: BaseTranslationResolve }}
];

@NgModule({
  imports: [RouterModule.forRoot(routes,
             { enableTracing: false } 
      )],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

A typical application routing looks like this:

const routes: Routes = [
  { path: '', children: [


    { path: 'orderSearch', component: OrderSearchComponent,
      data: { title : 'Order Search'}, canActivate: [AuthorityChecker], 
      resolve: {translation: OrderBundleResolve }},
    { path: 'orderEdit/:orderID', component: OrderEditComponent,
      data: { title : 'Order Edit'}, canActivate: [AuthorityChecker], 
      canDeactivate: [ConfirmLooseChanges],
      resolve: {translation: OrderBundleResolve }},
    { path: 'orderAdd', component: OrderAddComponent,
      data: { title : 'Order Add'}, canActivate: [AuthorityChecker], 
      canDeactivate: [ConfirmLooseChanges],
      resolve: {translation: OrderBundleResolve }},
  ], resolve: {translation: BaseTranslationResolve }}
];

@NgModule({
  imports: [RouterModule.forRoot(routes,
         { enableTracing: false } 
  )],
  exports: [RouterModule]
})
export class OrderRoutingModule {
}

It all works fine without the PageNotFoundComponent. If I add it to the end of the app-module-router.ts, none of the application routes work anymore. They all result in page not found.

Upvotes: 3

Views: 1436

Answers (2)

Scott
Scott

Reputation: 505

I was able to find the solution with the back and forth above (thanks Narm). It is now obvious and and a little embarrassing but here goes. The order matters! Below I have two feature modules: OrderModule and PurchasingModule. They have their own routes defined for their apps. The AppRoutingModule has all the generic routes and NOW has the ** PageNotFoundComponent. All I did was move it last after the apps modules. :-)

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    OrderModule,
    PurchasingModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Upvotes: 4

Narm
Narm

Reputation: 10864

You need only add it in your root router module. If you're using an Angular Cli project that would be your app-routing.module.ts

I wouldn't worry about the "waiting until all feature modules have loaded their routes", because during Angulars compilation phase all modules are merged into one factory.

Update: From the code you provided here is a working StackBlitz I created with similar router config to yours.

Upvotes: 1

Related Questions