Angular 5与Angular-CLI 1.7.x生产构建时懒加载失效问题咨询

嘿，我正好碰到过类似的情况，Angular 5.2.6搭配CLI 1.7.x确实会在生产构建懒加载时踩坑，不用降级CLI到1.6.x就能搞定，试试下面这些针对性的解决方案：

1. 先把懒加载路由的写法掰正 #

Angular 5和CLI 1.7.x对懒加载路径的语法要求特别严，一点拼写错误或者格式不对都可能导致生产构建挂掉：

• 必须用这种标准格式：loadChildren: './path/to/your/lazy-module/lazy-module.module#LazyModule'
  • 路径得是相对路径（从当前路由文件的位置出发）
  • 末尾的#ModuleClassName必须和懒加载模块的类名一模一样，大小写都不能错！
• 别用变量或者动态生成的路径字符串，生产构建时的AOT编译器根本解析不了这些花活

2. 检查tsconfig.json的关键配置 #

TypeScript的配置要是不对，懒加载在生产环境也会罢工：

• 打开tsconfig.json，确保compilerOptions下的module是es2015（Angular 5默认应该是这个，但万一被改了就得改回来）
• 确认target设为es5或更高，moduleResolution是node

3. 调整生产构建的优化参数 #

CLI 1.7.x的生产优化和Angular 5可能有点兼容性问题，试试关掉部分优化选项：

• 先试试不带构建优化器构建：ng build --prod --build-optimizer false
• 如果是AOT编译搞的鬼，可以临时关掉AOT（虽然不推荐长期用，但能先排查问题）：ng build --prod --aot false
  • 注意：关了AOT会影响生产包性能，解决问题后记得重新开回来

4. 揪出模块间的循环依赖 #

循环依赖是生产构建失败的常客，尤其是懒加载模块和其他模块之间：

• 用ng lint命令扫一遍项目，看看有没有循环依赖的警告
• 检查懒加载模块是不是导入了导入它的父模块，或者共享模块和懒加载模块是不是互相导入了

5. 把CLI升级到1.7.x的最新稳定版 #

CLI 1.7.x有好几个小版本，说不定你用的版本正好有懒加载的bug，升级到该分支的最后一个稳定版试试：

• 执行命令：npm install @angular/cli@1.7.4
• 升级后记得清一下缓存：npm cache clean --force，然后重新装一遍依赖

6. 检查懒加载模块的元数据 #

懒加载模块的@NgModule配置要是错了，生产构建也会报错：

• 懒加载模块绝对不能在根模块里声明或者导入！
• 懒加载模块的declarations里只能放自己的组件、指令、管道，别重复声明其他模块的东西
• 如果懒加载模块要用共享组件，得通过共享模块导入，别直接导入根模块

要是试完这些还是不行，把生产构建的具体报错信息贴出来，这样能更精准地定位问题~

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