Angular 15生产构建报错：ReferenceError: Cannot access 'T' before initialization

问题描述 #

本地开发环境运行一切正常，但切换到生产模式启动服务，或构建后在Docker容器中运行时，抛出如下错误：

402.js:1 Error: Uncaught (in promise): ReferenceError: Cannot access 'T' before initialization
ReferenceError: Cannot access 'T' before initialization
    at Object.e (pdf-create.service.ts:30:15)
    at 6635 (pdf-create.service.ts:32:39)
    at r (bootstrap:19:1)
    at 8337 (402.js:1:144)
    at r (bootstrap:19:1)
    at 3961 (input.component.html:77:24)
    at r (bootstrap:19:1)
    at 6582 (pdf-create.service.ts:30:15)
    at r (bootstrap:19:1)
    at 4059 (pdf-delegate-popup.component.html:26:44)

生成源映射定位后，错误出在pdf-create.service.ts的以下代码行：

@Injectable({
  providedIn: 'root',
})
export class PdfCreateService extends PdfHandling {

命令行无报错信息，清空浏览器缓存后问题依然存在。请问这是否与生产构建的优化环节有关？

问题分析与解决方案 #

这个问题大概率和生产构建的优化（摇树优化、代码压缩混淆等）有关，也可能涉及类的初始化顺序问题。以下是具体排查方向和解决办法：

• 基类初始化顺序异常：生产构建的代码重排可能导致子类PdfCreateService在基类PdfHandling完成初始化前就被引用。
  • 解决：确保PdfHandling在PdfCreateService文件顶部显式导入，避免间接导入；如果基类来自第三方库，检查库版本与Angular 15的兼容性。
• 构建优化冲突：Angular生产模式默认启用的buildOptimizer和optimization可能错误处理了类的依赖关系。
  • 解决：临时禁用构建优化验证问题：修改angular.json中对应项目的configurations.production配置，将buildOptimizer设为false，optimization设为false，重新构建后观察问题是否消失。如果问题解决，再逐步调整优化选项，或升级Angular CLI到最新稳定版。
• 循环依赖问题：PdfCreateService、PdfHandling或它们依赖的模块可能存在循环引用，开发环境宽松的处理不会触发错误，但生产构建的严格优化会暴露问题。
  • 解决：执行ng build --prod --verbose查看构建日志排查循环依赖；重构代码消除循环引用，比如引入中间服务或使用依赖注入延迟加载。
• 压缩变量重命名冲突：压缩工具可能将基类相关变量重命名为T，但初始化顺序问题导致变量未定义就被访问。
  • 解决：如果PdfHandling来自第三方库，在angular.json的build.options.allowedCommonJsDependencies中添加该库；或在tsconfig.json中配置compilerOptions.paths确保模块解析正确。

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