Angular10改tsconfig的module为es2020后报jobTreeReducers未初始化错误

报错根因 #

该报错是ES模块（ES2020）静态解析规则比CommonJS更严格导致的：CommonJS对循环依赖有动态兼容处理，切换模块规范后，项目中原本隐性的循环依赖被暴露，出现jobTreeReducers在初始化完成前就被调用的情况，90%以上的该类问题都和你用的index.ts桶导出逻辑有关。

可落地解决方案 #

按优先级从上到下尝试即可：

• 优先替换桶导出为直接导入
  跳过index.ts桶导出层，直接从reducer、effect的源文件导入对应内容，路径和你实际文件位置对齐即可：

  // job-tree-store.module.ts 修改导入部分
  import { NgModule } from "@angular/core";
  import { StoreModule } from "@ngrx/store";
  import { EffectsModule } from "@ngrx/effects";
  import { CommonModule } from '@angular/common';
  // 替换原有从index导入的语句，示例路径请根据你的实际文件结构调整
  import { jobTreeReducers } from './reducers/job-tree.reducer';
  import { JobTreeEffects } from './effects/job-tree.effects';
  
  @NgModule({
      imports: [
          CommonModule,
          StoreModule.forFeature('jobTree', jobTreeReducers),
          EffectsModule.forFeature([JobTreeEffects]),
      ]
  })
  export class JobTreeStoreModule {}
  

• 调整桶文件导出顺序
  如果你需要保留index.ts桶导出的写法，打开该文件调整导出顺序：保证jobTreeReducers的导出语句放在所有依赖它的模块（比如JobTreeEffects）的导出语句之前，ES模块按代码顺序解析，调整顺序可解决大部分初始化时序问题。
• 补充tsconfig兼容配置
  在tsconfig.json中补充以下配置，适配Angular 10 + ES2020模块的加载逻辑：

  {
    "compilerOptions": {
      "moduleResolution": "node",
      "allowSyntheticDefaultImports": true,
      "useDefineForClassFields": false
    }
  }
  

• 规避解构导入问题
  若以上方案都无效，把reducer的导入改成命名空间整体导入的形式，规避解构触发的提前访问：

  // 替换原有导入写法
  import * as fromJobTree from './reducers';
  // 注册时用命名空间调用属性
  StoreModule.forFeature('jobTree', fromJobTree.jobTreeReducers)
  

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