Angular 2 (v5)应用程序中的延迟加载模块

Question

我在Angular 2(5.1.3版)项目中遇到了让延迟加载工作的问题。

我正在关注Todd Motto在这个Lazy Loading Code Splitting上的文章，但我不能完成最后一英里来让它工作。

我有一个有多个模块的应用程序，我想延迟加载其中的几个模块(大多数用户不使用该功能，并且应用程序本身很大，捆绑了所有模块)。

app.module路由配置如下所示：

export const routes: Routes = [
  { path: '', 
    redirectTo: 'login', 
    pathMatch: 'full'
   },
  { path: 'login', 
    component: LoginComponent
  },
  { path: 'home', 
    component: HomeComponent
  },
  { path: 'reports-engine', 
    loadChildren: './reportsengine/reportsengine.module#ReportsEngineModule'
  },
  { path: '**', 
    component: NotFoundComponent
  }
];

和ReportsEngine模块：

export const routes: Routes = [
  {
    path: '', 
    component: ReportsComponent,
    children: [{ 
      path: '', 
          redirectTo: 'reports-engine',
          pathMatch: 'full'
        },
      { 
      path: 'account', 
          component: Account
        },
      { 
      path: 'accounts-manage', 
          component: AccountsManage
        },
      {
      path: '**', 
          component: NotFoundComponent
      }]
  }
];

我的webpack.config (相关部分)如下：

output: {
    filename: '[name].js',
    chunkFilename: '[name].chunk.js',
    path: path.resolve(cwd, 'build'),
    publicPath: './build/',
    sourceMapFilename: '[name].map'
},

rules.push({
    test: /\.ts$/, 
        loaders: [
            'awesome-typescript-loader',
            'angular2-template-loader'
        ] ,
    test: /\.(ts|js)$/,
        loaders: [
            'angular-router-loader'
        ] ,
    include: [
        path.resolve(cwd, 'app')
    ]
});

目前它只构建主app.js和vendor.js文件(以及.map文件)，而不是0.chunk.js等文件。

当我导航到/reports-engine url时，我得到一个'page not found'，这是我期望的ReportsComponent。

我不确定我错过了什么。

Answer 1

ReportEngine模块。

export const routes: Routes = [
  {
    path: '', 
    component: ReportsComponent,
    children: [    
      { 
        path: 'account', 
        component: Account
      },
      { 
        path: 'accounts-manage', 
        component: AccountsManage
      },
      {
        path: '**', 
        component: NotFoundComponent
      }
    ]
  }
];

像这样改变它会起作用的。

如果你想要子路径：‘’->check像这样放

 children: [
      {
        path: '',
        component: AboutComponent
      }
 ]

如果您有任何疑问，请访问此链接，它只是简单地进行延迟加载

https://scotch.io/courses/routing-angular-2-applications/lazy-loading

我希望它能有所帮助。