为什么 Angular 6 组件没有在延迟加载的模块中路由答案

【问题标题】：Why Angular 6 component not routed in a lazy loaded module为什么 Angular 6 组件没有在延迟加载的模块中路由
【发布时间】：2018-12-07 13:43:16
【问题描述】：

经过数小时的重构，我不明白为什么延迟加载的路由模块中的路径没有按预期运行。

我的应用顶部有一个路由模块，用于加载仪表板模块：

  ...
  {
    path: 'dashboard',
    loadChildren: '@app/dashboard/dashboard.module#DashboardModule',
    canActivate: [AuthGuardService]
  },
  ...

DashboardModule 导入 DashBoardRoutingModule 定义为：

const routes: Routes = [
  {
    path: '', component: DashboardComponent,
    canActivate: [AuthGuardService],
    children: [
      {path: 'shops', component: ShopListComponent}
    ]
  }
];

我预计 http://localhost/dashboard/shops 会加载 ShopListComponent 但......根本不会......

我阅读了一些与此行为相关的帖子，但即使组件本身也不在模块内部，或者...演示仅限于一条路线...

我错过了什么？检查了我所有的导入和声明...

谢谢

【问题讨论】：

有错误提示吗？
没什么...只是后备路线（即/dashboard）
你可以试试loadChildren: './dashboard/dashboard.module#DashboardModule'而不是loadChildren: '@app/dashboard/dashboard.module#DashboardModule'
同样的事情......将加载组件的按钮代码：{{ option.content .title }}
...如果我检查控制台...没有加载任何内容，单击按钮时网络选项卡为空...但浏览器显示localhost:4200/dashboard/shops

标签： angular routing lazy-loading

【解决方案1】：

在 hello 组件中你正在尝试这个：

<a routerLink="/shops">Boutiques</a>

路径应该是：

<a routerLink="/dashboard/shops">Boutiques</a>

【讨论】：

【解决方案2】：

我们发现问题在于延迟加载模块中缺少<router-outlet></router-outlet>。

【讨论】：