代码之家 › 专栏 › 技术社区 › Scott

如何添加带功能模块的找不到页面路由

routing module angular

Scott · 技术社区 · 7 年前

我们有角度应用程序模块,每个应用程序负责定义它们的路径。这一切都很好,除了我们也希望一个页面找不到路由。

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

没有pageNotFound组件,一切都可以正常工作。如果我把它添加到app-module-router.ts的末尾,所有的应用程序路由都不再工作。它们都会导致找不到页面。

2 回复 | 直到 7 年前

Scott 7 年前

我能够找到解决方案与上述来回(谢谢纳姆)。现在很明显,也有点尴尬,但接下来是。命令很重要!下面我有两个功能模块:订单模块和采购模块。他们为自己的应用程序定义了自己的路由。批准模块具有所有通用路由,现在具有**pageNotFound组件。我所做的就是把它移到应用程序模块之后。-)

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

Narm Rohit 7 年前

您只需要将它添加到根路由器模块中。如果您使用的是Angular CLI项目,那么 app-routing.module.ts

我不会担心“等到所有的功能模块都加载了它们的路径”,因为在Angulars编译阶段,所有的模块都被合并到一个工厂中。

更新: 从你在这里提供的代码可以看出 StackBlitz 我创建的路由器配置与您的相似。