Question

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

app-routing.module.ts

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

和在模块中：

  imports: [RouterModule.forRoot(routes)],

customer-routing.module.ts

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

和在模块中：

imports: [
    RouterModule.forChild(routes)
  ],

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

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

错误错误：未捕获（承诺）：错误：无法匹配任何路由。网址区隔：“个人资料”错误：无法匹配任何路线。网址段： '轮廓' 在ApplyRedirects.push ../ node_modules/@angular/router/fesm5/router.js.ApplyRedirect

不太确定我要去哪里错了。

Answer 1

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

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

但是由于无法在其中找到它，因此引发了此错误。

要使Angular看起来超出空路径（''），它需要使用prefix pathMatch策略，除非您将其指定为{{1}，否则策略默认使用}。

您可能想尝试从AppRoutingModule中的路由配置中删除full来对其进行修复。

Answer 2

您已发布导航路径。您应该使用root

从/开始导航

this._router.navigate(['/', 'profile']))

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

2 个答案: