Angular 5懒加载模块刷新失效问题咨询

我之前也碰到过类似的问题，Angular 5 在非 --prod 构建下的懒加载模块刷新失效，确实挺影响开发效率的，咱们一步步来拆解和解决：

问题根源 #

核心问题出在生产构建和非生产构建的打包策略差异上：

• 当你用 ng build --prod 时，Angular CLI 会自动开启 outputHashing: "all"，所有打包后的文件（包括懒加载模块的chunk）都会带上唯一哈希值，路由能精准匹配到这些带哈希的文件，刷新时自然不会出错；
• 但用 --dev、--aot 或者直接 ng build（默认是dev模式）时，默认的 outputHashing 是 none，懒加载模块的chunk文件名是固定的（比如 chunk.js），加上开发模式下路由解析的逻辑相对宽松，刷新时浏览器要么缓存了旧文件，要么路由找不到正确的模块入口，就会出现失效的情况。

实用解决方案 #

1. 修改构建配置，让dev模式也生成带哈希的文件 #

找到项目根目录下的 .angular-cli.json（Angular 5 用的是这个配置文件），在 defaults.build 节点里添加 outputHashing: "all"：

"defaults": {
  "build": {
    "outputHashing": "all"
  }
}

修改完之后再执行 ng build --dev，你会看到打包后的chunk文件都带上了哈希值，这时候刷新页面，路由就能正确定位到懒加载模块了。

2. 检查懒加载路由的语法是否正确 #

Angular 5 的懒加载路由有固定的格式：路径#模块类名，别写错了！比如：

const routes: Routes = [
  {
    path: 'user',
    loadChildren: './user/user.module#UserModule' // 注意这里的#分隔符
  }
];

如果写成了只带路径不带#模块名的格式，在非prod模式下很容易出现刷新找不到模块的问题，务必检查一遍。

3. 开发阶段优先用 ng serve #

其实开发阶段更推荐直接用 ng serve 启动项目，它是在内存中构建的，自带热重载，懒加载模块的刷新逻辑完全正常，而且比每次build再部署要高效太多。如果必须要测试build后的文件，结合上面的outputHashing配置就能解决问题。

额外说明 #

为什么--prod模式下没问题？除了带哈希的文件名，prod模式还开启了AOT编译、代码压缩等优化，路由解析的逻辑更严谨，能完美适配懒加载模块的路径匹配；而dev模式为了加快构建速度，简化了一些打包逻辑，才会出现这个差异。

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