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

我能够找到上面来回的解决方案（感谢Narm）。它现在显而易见，而且有点尴尬但是这里有。订单很重要！下面我有两个功能模块：OrderModule和PurchasingModule。他们为自己的应用定义了自己的路线。 AppRoutingModule具有所有通用路由，NOW具有** 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我用你的类似路由器配置创建。

如何使用功能模块添加页面未找到的路径

2 个答案: