延迟加载另一个模块时路由中断

Question

我有一个延迟加载模块 AccountModule，它在访问 https://localhost:4201/account 后被加载。

app.routing.ts

const routes: Routes = [

  {
    path: '',
    loadChildren: () => import('./ui/pages/start/start.module')
      .then(m => m.StartModule)
  },


  {
    path: 'account',
    loadChildren: () => import('./ui/pages/account/account.module')
      .then(m => m.AccountModule)
  },

];

export const AppRouting = RouterModule.forRoot(routes, {
  useHash: false,
  enableTracing: false
});

AccountModule 有两个子路由。其中一个被急切地加载（/overview），而另一个被延迟加载（/albums）。

因此，acount.routing.ts 看起来像这样：

const routes: Routes = [

  {path: '', redirectTo: 'overview', pathMatch: 'full'},

  {
    path: 'overview',
    component: AccountComponent,
  },

  {
    path: 'albums',
    loadChildren: () => import('./albums/albums.module').then(m => m.AlbumsModule),
    // component: AlbumsComponent  // This works!
  },

];

export const AccountRouting = RouterModule.forChild(routes);

现在，如果我使用“渴望”加载 (component:AlbumsComponent) 一切正常。但是，如果我切换到loadChildren: () => ...，路由将不再起作用。这个routerLink

<app-raised-button [routerLink]="['/account/albums']">
  My Albums
</app-raised-button>

导致https://localhost:4201/account/albums（工作）或https://localhost:4201/account/albums/overview（不工作）。但为什么？我该如何解决这个问题？

为什么它的行为会因为模块/组件的加载方式而有所不同？

---

如果我将路径设置为./albums：

{
  path: './albums',
  loadChildren: () => import('./albums/albums.module').then(m => m.AlbumsModule),
},

我只是得到

错误：无法匹配任何路由。网址段：'account/albums'

Answer 1

我猜你还没有为 albums.routing.module 提供路线？

由于您已经指导了 albums.module，但您可能没有从那里提供您所展示的组件。

如果您还没有创建到 albums.routing.module，请创建一个并在同一模块中提供默认路由。

const routes: Routes = [

  {path: '', component:AlbumsComponent } ];

Answer 2

确保在您的相册模块中，您已导入路线，如下所示：RouterModule.forChild(albumsRoutes)