Angular 6 中的延迟加载导致无法匹配任何路由

Question

我正在尝试在我的 Angular 应用程序中实现延迟加载。这是我的路线：

应用程序路由.module.ts

const routes: Routes = [
  {
    path: '',
    loadChildren: './customer/customer.module#CustomerModule',
    pathMatch: 'full'
  }
];

并在模块中：

  imports: [RouterModule.forRoot(routes)],

客户路由.module.ts

export const routes: Routes = [
  { path: '', component: ComparePageComponent },
  { path: 'funds', component: FundSelectionComponent },
  { path: ':service', component: ComparePageComponent },
  { path: '**', component: PageNotFoundComponent },
];

并在模块中：

imports: [
    RouterModule.forChild(routes)
  ],

现在，我有一个逻辑，/profile当没有路径参数时，即当this._router.navigate(['', 'profile'])我已经在客户模块中定义了路径的 url 为 '' ( )时，将加载页面{ path: ':service', component: ComparePageComponent }

但是，当应用程序运行时，会导致以下错误：

错误错误：未捕获（承诺）：错误：无法匹配任何路由。URL 段：“个人资料”错误：无法匹配任何路由。URL 段：ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirect 处的“配置文件”

不太确定我哪里出错了。

Answer 1

您AppRoutingModule只有一条CustomerModule为用户加载的路线。但这也是在空路线上（''）。

但是，当您将用户导航到/profile路线时，Angular 会查找与'profile'AppRoutingModule 中的路径相对应的配置。

但由于它无法在那里找到它，因此会抛出此错误。

为了让 Angular 超越空路径( '')，它需要使用该prefix pathMatch策略，除非您将其指定为 ，否则默认使用该策略full。

您可能需要尝试pathMatch: 'full'从 AppRoutingModule 的路由配置中删除 来修复它。