Как добавить страницу не найденный маршрут с функциональными модулями

Question

У нас есть модули приложений Angular, где каждое приложение отвечает за определение своих маршрутов.Это все работает нормально, за исключением того, что мы также хотели бы, чтобы страница не нашла маршрут.

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

Как лучше всего добавлять этот маршрут последним.Другими словами, каждый модуль приложения не будет определять его, есть ли способ добавить его после того, как все функциональные модули загрузили свои маршруты?

Мой app-module-router.ts выглядит следующим образом:

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 {
}

Типичная маршрутизация приложений выглядит следующим образом:

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 {
}

Все это прекрасно работает без PageNotFoundComponent.Если я добавлю его в конец файла app-module-router.ts, ни один из маршрутов приложения больше не будет работать.Все они приводят к тому, что страница не найдена.

Answer 1

Мне удалось найти решение взад и вперед выше (спасибо Нарм).Это теперь очевидно и немного смущает, но здесь идет.Порядок имеет значение!Ниже у меня есть два функциональных модуля: OrderModule и PurchasingModule.У них есть свои собственные маршруты, определенные для их приложений.AppRoutingModule имеет все общие маршруты, и теперь СЕЙЧАС имеет ** PageNotFoundComponent.Все, что я сделал, это переместил его последним после модулей приложений.: -)

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

Answer 2

Вам нужно только добавить его в свой модуль корневого маршрутизатора.Если вы используете проект Angular Cli, который будет вашим app-routing.module.ts

, я не буду беспокоиться о «ожидании, пока все функциональные модули загрузят свои маршруты», потому что на этапе компиляции Angulars все модули объединяютсяв одну фабрику.

Обновление: Из приведенного здесь кода вы работаете StackBlitz , который я создал с помощью конфигурации роутера, аналогичной вашей.