Angular导入模块触发Range Error: Maximum call stack size exceeded报错

问题原因 #

• 代码存在模块循环依赖：CoreModule的imports数组中引入了IfaButtonModule、MachineModule，同时IfaButtonModule和MachineModule的imports数组又都引入了CoreModule，形成了无法解析的模块依赖闭环，Angular在加载核心模块时无法完成依赖解析，因此触发错误。

解决方案 #

拆解循环依赖即可解决问题，核心思路是剥离双向依赖的公共部分，避免模块之间的双向引入，可按以下步骤操作：

1. 新建公共共享模块SharedModule，将CoreModule中被IfaButtonModule、MachineModule依赖的公共组件（如TakePhotoComponent、ConfirmationDialogComponent等）、公共依赖模块（如Angular Material相关模块、TranslateModule、通用表单模块等）迁移到SharedModule中，SharedModule仅负责导出通用的组件、指令、管道和第三方依赖，不要引入任何业务模块。
2. 调整IfaButtonModule、MachineModule的依赖配置：将两个模块imports数组中的CoreModule替换为SharedModule，业务模块仅依赖公共共享模块，不再依赖CoreModule。
3. 调整CoreModule的配置：CoreModule仅需要引入SharedModule、IfaButtonModule、MachineModule即可，无需重复导出SharedModule中已有的公共内容。

补充优化建议：按照Angular官方最佳实践，CoreModule建议仅在根模块AppModule中引入一次，用于存放全局单例服务、全局拦截器、路由守卫这类全局生效的内容，不要存放可复用的公共UI组件，公共UI组件统一归档到SharedModule管理更合理。

内容的提问来源于stack exchange，提问作者Sini.py