Angular 5迁移后angular-router-loader失效，懒加载模块无法加载

这种JIT下懒加载模块死活不加载但AOT完全正常的情况我之前踩过坑，大概率是angular-router-loader的配置或者路由写法出了问题，咱们一步步排查解决：

1. 检查webpack中angular-router-loader的顺序 #

angular-router-loader必须放在TS编译loader（比如ts-loader或awesome-typescript-loader）的后面，因为它需要先处理完TypeScript代码，再解析懒加载的路由语法。正确的配置应该是这样：

module: {
  rules: [
    {
      test: /\.ts$/,
      use: [
        'ts-loader',
        'angular-router-loader' // 注意顺序，TS loader在前
      ]
    }
  ]
}

如果还是不行，可以尝试显式加上?lazy=true参数：

use: [
  'ts-loader',
  'angular-router-loader?lazy=true'
]

2. 确认路由的懒加载语法正确 #

Angular 5还不支持Angular 8+引入的箭头函数懒加载写法，必须使用路径#模块类名的格式，而且模块类名要和你导出的类完全一致：

const routes: Routes = [
  {
    path: 'lazy-path',
    loadChildren: './lazy-module/lazy.module#LazyModule' // #分隔路径和模块类名
  }
];

别把模块类名写成文件名，比如要写LazyModule而不是lazy.module。

3. 配置webpack的chunk输出规则 #

确保webpack的output配置里明确指定了chunkFilename，否则JIT模式下webpack可能不会生成单独的懒加载chunk文件：

output: {
  filename: '[name].bundle.js',
  chunkFilename: '[name].chunk.js' // 必须配置这个，否则懒加载chunk无法生成
}

4. 调整webpack的devtool设置 #

部分devtool模式（比如eval）会干扰懒加载chunk的生成，建议改成source-map或者直接关闭：

devtool: 'source-map'

5. 清理缓存后重新构建 #

webpack的缓存有时候会保留旧的配置，导致修改不生效。可以手动删除dist文件夹、node_modules/.cache目录，或者在package.json里加一个清理脚本：

"scripts": {
  "clean": "rimraf dist node_modules/.cache"
}

运行npm run clean后再重新构建项目。

如果以上方法都没用，可以检查@angular/router的版本是否和Angular 5的核心版本完全匹配，版本不一致也会导致这类奇怪的兼容性问题。另外，JIT模式下可以打开浏览器的Network面板，看看是否有发起懒加载chunk的请求：如果没请求，说明路由解析有问题；如果请求404，那就是chunk的输出路径或者命名有问题。

内容的提问来源于stack exchange，提问作者Emmanuel Mendoza