Angular 4执行ng build --prod时出现栈溢出RangeError求助

我之前在做Angular项目生产构建时，也碰到过一模一样的RangeError: Maximum call stack size exceeded错误，折腾了好一阵才解决。这个问题基本都是Angular的AOT编译器在处理模板、表达式或者依赖时，遇到了递归调用过深的情况，给你分享几个亲测有效的解决思路：

• 检查模板与组件的递归引用
  先排查有没有组件自己引用了自己的情况，或者模板里用了无限递归的ng-template、ng-container结构。另外，自定义管道、指令里如果写了递归逻辑（比如处理树形数据的管道），也很容易触发栈溢出，仔细检查这些地方的递归终止条件是否正确。

• 简化模板中的复杂表达式
  生产构建的AOT编译比开发环境的JIT严格得多，有些在开发时能正常运行的复杂模板表达式（比如嵌套多层的三目运算、链式调用），在AOT解析时会因为递归深度超过栈限制报错。建议把这些复杂逻辑移到组件类里，用方法或者计算属性来替代，别直接写在模板中。

• 增大Node.js的栈空间
  如果确认是合理的深层结构导致的栈溢出，可以尝试增大Node.js的栈大小来解决。执行构建命令时加上--stack-size参数，比如：

  node --stack-size=65536 node_modules/@angular/cli/bin/ng build --prod
  

  注意数值不要设置得过大，否则可能会引发内存不足的问题。

• 排查第三方依赖问题
  有些旧版本的第三方UI组件库或者工具库，代码结构可能不兼容Angular的AOT编译，会触发递归解析的问题。尝试把这些依赖更新到最新稳定版，或者去相关库的Issue区看看有没有其他开发者遇到类似问题的解决方案。

• 临时禁用优化排查问题
  可以先尝试关闭生产构建的优化选项，看看是否能成功构建：

  ng build --prod --optimization=false
  

  如果构建成功，再逐步开启优化项（比如--build-optimizer、--aot等），定位到底是哪个优化步骤导致的问题，这样能更精准地找到根源。

如果还是找不到问题，可以加上--verbose参数输出详细构建日志：

ng build --prod --verbose

从日志里能看到错误发生在编译哪个组件或模块时，方便快速定位问题点。

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