Angular12升级至15及ES版本升级后模块导入导出问题求助

问题1：接口导出警告 #

升级后出现大量类似如下的导出警告：

WARNING in ./libs/data-models/src/lib/data-models.ts 87:0-1770
export 'ILights' (reexported as 'ILights') was not found in './models/entities/lights_ifc' (module has no exports)

其中ILights是标准TS接口：

export interface ILights {
  pk: number;
  timeUpdated: Date;
  lightId: string;
  groupName: string | null;
  type: LightsType;
  state: LightsState;
}

问题2：循环依赖相关运行时错误 #

同时出现运行时错误：

C:\Users\Dominik\Desktop\Work\web_gui\dist\apps\api\main.js:843
/* harmony export */   "AlarmsRepository": () => (/* binding */ AlarmsRepository)
                                                                ^
ReferenceError: Cannot access 'AlarmsRepository' before initialization
    at Module.AlarmsRepository (C:\Users\Dominik\Desktop\Work\web_gui\dist\apps\api\main.js:843:65)
    at Object../apps/api/src/alarms/alarms.service.ts (C:\Users\Dominik\Desktop\Work\web_gui\dist\apps\api\webpack:\web-app-random-name\apps\api\src\alarms\alarms.service.ts:48:83)
    at __webpack_require__ (C:\Users\Dominik\Desktop\Work\web_gui\dist\apps\api\webpack:\web-app-random-name\webpack\bootstrap:19:1)
    at Object../apps/api/src/gateway/message.queue.ts (C:\Users\Dominik\Desktop\Work\web_gui\dist\apps\api\main.js:7216:84)
    at __webpack_require__ (C:\Users\Dominik\Desktop\Work\web_gui\dist\apps\api\webpack:\web-app-random-name\webpack\bootstrap:19:1)
    at Object../apps/api/src/rabbitmq/rabbitmqFpi.provider.ts (C:\Users\Dominik\Desktop\Work\web_gui\dist\apps\api\main.js:11803:84)
    at __webpack_require__ (C:\Users\Dominik\Desktop\Work\web_gui\dist\apps\api\webpack:\web-app-random-name\webpack\bootstrap:19:1)
    at Object../apps/api/src/alarms/alarms.repository.ts (C:\Users\Dominik\Desktop\Work\web_gui\dist\apps\api\main.js:849:92)
    at __webpack_require__ (C:\Users\Dominik\Desktop\Work\web_gui\dist\apps\api\webpack:\web-app-random-name\webpack\bootstrap:19:1)
    at Object../apps/api/src/airplanes/airplanes.repository.ts (C:\Users\Dominik\Desktop\Work\web_gui\dist\apps\api\main.js:291:87)
No errors found.

错误指向为解决循环依赖添加的代码：

@Inject(forwardRef(() => AlarmsRepository)) private readonly alarmRepository: AlarmsRepository

环境信息 #

• Angular及相关依赖版本：

@angular-devkit/architect          0.1500.4
@angular-devkit/build-angular      15.0.4
@angular-devkit/core               15.0.4
@angular-devkit/schematics         15.0.4
@angular/cdk                       15.0.3
@angular/material                  15.0.3
@angular/material-moment-adapter   15.0.3
@schematics/angular                15.0.4
rxjs                               7.8.0
typescript                         4.8.4
webpack                            5.75.0

• 升级后tsconfig.json关键配置：

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ES2022",
    "lib": ["ES2021", "dom"],
    // 其他配置省略
  }
}

• 升级前tsconfig.json关键配置：

{
  "compilerOptions": {
    "target": "es2015",
    "module": "es2020",
    "lib": ["es2017", "dom"],
    // 其他配置省略
  }
}

针对接口导出警告 #

1. 检查路径大小写一致性：ES模块对文件路径大小写敏感，Windows环境下之前可能忽略该规则，升级后Webpack/TS编译严格性提升会触发警告。确认data-models.ts中导入ILights的路径与实际文件名大小写完全匹配。
2. 验证导出逻辑正确性：检查lights_ifc.ts文件是否确实存在export interface ILights，没有被注释或拼写错误；同时确认data-models.ts中的reexport语句（如export { ILights } from './models/entities/lights_ifc'）写法正确。
3. 对齐TS编译配置版本：将lib数组调整为与target版本匹配，改为["ES2022", "dom"]；若问题仍存在，可暂时将module改回ES2020，观察警告是否消失——ES2022模块的处理逻辑与旧版本存在差异，可能导致接口导出被编译优化时出现异常。

针对循环依赖运行时错误 #

1. 补全双向forwardRef配置：循环依赖需要双方都使用forwardRef。如果AlarmsRepository也注入了AlarmsService，需在其构造函数中同样添加@Inject(forwardRef(() => AlarmsService))，仅单方面使用会导致初始化顺序混乱。
2. 重构消除循环依赖：这是最彻底的解决方案，可通过以下方式实现：
   • 抽离共享逻辑到独立的服务/工具类，让AlarmsService和AlarmsRepository都依赖该新模块，而非互相依赖；
   • 使用Injector手动获取依赖，替代构造函数注入：

     constructor(private injector: Injector) {}
     
     someMethod() {
       const alarmRepo = this.injector.get(AlarmsRepository);
     }
     

3. 调整模块编译配置：暂时将module改为CommonJS测试，ES模块的变量提升逻辑与CommonJS不同，可能触发初始化顺序问题。若错误消失，再逐步调回ES2022，同时排查循环依赖的具体触发点。
4. 关闭Webpack优化排查：Angular 15的Webpack 5默认开启了更多优化，可能导致模块导出顺序变化。可在angular.json中临时关闭优化：

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

   确认错误是否消失后，再逐步开启优化，定位冲突的配置项。

内容的提问来源于stack exchange，提问作者D.Zet