Angular 6 - 延迟加载模块的子路径未加载答案

【问题标题】：Angular 6 - Children paths of lazy loaded module are not loadingAngular 6 - 延迟加载模块的子路径未加载
【发布时间】：2018-11-20 09:27:14
【问题描述】：

我正在尝试在延迟加载的模块中使用路由，但它不起作用。

这是我的应用模块路由。

  export const routes: Routes = [
  {
    path: '',
    component: DefaultLayoutComponent,
    data: {
      title: 'Home'
    },
    children: [
      {
        path: 'holiday',
        loadChildren: './holiday/holiday.module#HolidayModule'
      }
    ]
  },
  {
    path:"**",
    component:P404Component
  }
];

这是延迟加载模块的 RoutingModule。

   const routes: Routes = [
  {
    path: '', children: [
      { path: '', component: HolidayBookingComponent },
      { path: ':id', component: HolidayBookingComponent },
      { path: 'booking', component: HolidayBookingComponent },
      { path: 'review', component: HolidayReviewComponent }
    ]
  },

];

我可以正确导航到http://localhost:4200 和http://localhost:4200/holiday。

但是当我尝试时 http://localhost:4200/holiday/1 它会在控制台中抛出 404。

GET http://localhost:4200/holiday/runtime.js net::ERR_ABORTED 404 (Not Found)

这些是 package.json 中的依赖项，以备不时之需。

"@angular/cli": "^6.2.6",
"@angular/router": "^6.1.10",
"@angular/core": "^6.1.10",

【问题讨论】：

标签： angular angular-cli angular6 angular-routing

【解决方案1】：

请看这个例子

   https://angular-svs3xe.stackblitz.io

   https://stackblitz.com/edit/angular-svs3xe

【讨论】：

【解决方案2】：

您可能希望将其用于您的懒惰路线：

const routes: Routes = [
      { path: '', component: HolidayBookingComponent },
      { path: ':id', component: HolidayBookingComponent },
      { path: 'booking', component: HolidayBookingComponent },
      { path: 'review', component: HolidayReviewComponent }
];

【讨论】：