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

问题描述

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

I am trying to work with routing in lazy loaded modules, but it is not working.

这是我的应用模块路由.

This is my app module routing.

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

这是用于延迟加载模块的 RoutingModule.

This is RoutingModule for lazy-loaded module.

   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 正确.

I can navigate to http://localhost:4200 and http://localhost:4200/holiday correctly.

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

But when I try http://localhost:4200/holiday/1 it throws 404 in console.

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

这些是 package.json 中的依赖项，以防您需要.

These are dependencies in package.json in case you need it.

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

推荐答案

请看这个例子

   https://angular-svs3xe.stackblitz.io

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

这篇关于Angular 6 - 延迟加载模块的子路径未加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！