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

【问题标题】：Lazy Loading Modules in Angular 2 (v5) ApplicationAngular 2 (v5) 应用程序中的延迟加载模块
【发布时间】：2018-06-14 19:32:07
【问题描述】：

我无法在 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 网址时，我得到一个“找不到页面”，我期待的是 ReportsComponent。

我不确定我错过了什么。

【问题讨论】：

在控制台添加日志路由事件，不确定是webpack的问题
@AngularInDepth.com 你能否提供更多关于在哪里记录事件的细节，特别是我在寻找什么？谢谢！（今天下午我正在阅读你所有的 Medium 帖子，希望你在其中一篇文章中介绍了 LazyLoading——那里有一些非常有用的材料）。
酷。只需添加 RouterModule.forRoot(..., { enableTracing: true }) 并将导航到 reports-engine 时记录的内容添加到答案中

标签： angular typescript webpack module lazy-loading

【解决方案1】：

报告引擎模块。

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

这样改就行了。

如果你想要子路径：'' -> 像这样检查放置

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

如果您有任何疑问，请访问此链接，这只是为了进行延迟加载

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

我希望它会有所帮助。

【讨论】：