npm build编译后丢失Angular的@Injectable装饰器问题求助

以下是针对你遇到的问题的几种排查和解决方向：

• 检查tsconfig.json的关键编译配置
  在compilerOptions中除了experimentalDecorators: true，还要确保：

  • target设置为ES2020或更高版本（ES5对装饰器的编译支持有限，可能导致装饰器被移除）
  • 添加preserveDecorators: true，强制TypeScript保留装饰器元数据，避免编译时被优化掉：

    {
      "compilerOptions": {
        "target": "ES2020",
        "experimentalDecorators": true,
        "preserveDecorators": true,
        // 其他配置...
      }
    }
    

• 确保@Injectable装饰器配置完整
  父类服务必须明确指定providedIn属性，否则TypeScript可能判定装饰器为冗余并在编译时移除。示例：

  @Injectable({
    providedIn: 'root' // 或指定具体模块
  })
  export class BaseService {}
  

• 调整Angular构建优化策略
  打开angular.json，检查build选项中的优化配置，过度的优化可能会移除未被直接引用的装饰器：

  1. 先临时关闭优化测试是否解决问题：

     "architect": {
       "build": {
         "options": {
           "optimization": false,
           "buildOptimizer": false
         }
       }
     }
     

  2. 如果关闭优化后装饰器恢复，说明是优化导致的，可以针对性调整优化规则，或者保留preserveDecorators: true的同时开启基础优化。

• 检查子类的注入配置
  确保继承父类的子类也正确配置了依赖注入规则：要么添加@Injectable({ providedIn: 'root' })装饰器，要么在对应模块的providers数组中声明。如果子类未被DI系统识别，父类的装饰器可能被视为无用而被tree-shaking移除。

• 升级依赖版本
  旧版本的TypeScript或Angular框架可能存在装饰器编译的bug，建议升级到当前稳定兼容的版本（比如Angular 15+搭配TypeScript 4.8+），修复已知的编译问题。

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