Angular多项目仓库中NG0203注入上下文错误求助

可能的原因及修复步骤 #

• 检查配置文件的inject()调用时机
  确保配置文件里的inject()函数仅在注入上下文内执行——比如provideXxx工厂函数、组件构造函数、APP_INITIALIZER初始化逻辑中，不能直接在模块/组件外部的顶层代码调用。
  错误示例：

  // 顶层直接调用inject，不在注入上下文
  const config = inject(ConfigService);
  export const appConfig = { providers: [...] };
  

  正确示例：

  export const appConfig: ApplicationConfig = {
    providers: [
      {
        provide: APP_INITIALIZER,
        useFactory: (configService: ConfigService) => () => configService.load(),
        deps: [ConfigService],
        multi: true
      }
    ]
  };
  

• 确认独立应用的引导逻辑
  子项目必须用bootstrapApplication而非传统NgModule引导，混合两种方式会导致注入上下文混乱。检查main.ts：

  // 标准独立应用引导方式
  bootstrapApplication(AppComponent, appConfig)
    .catch(err => console.error(err));
  

• 排查依赖重复问题
  即使设置了preserveSymlinks: true，如果子项目和根项目存在多版本的Angular核心依赖（如@angular/core），也会触发该错误。执行命令检查依赖树：

  npm ls @angular/core
  

  若发现多版本，在根目录package.json中强制统一版本：

  // npm 用resolutions
  "resolutions": {
    "@angular/core": "^16.0.0"
  }
  // pnpm 用pnpm.overrides
  "pnpm": {
    "overrides": {
      "@angular/core": "^16.0.0"
    }
  }
  

• 调整构建配置
  在angular.json子项目的build配置中，开启aot并添加配置文件相关的CommonJS依赖白名单：

  "projects": {
    "your-subproject": {
      "architect": {
        "build": {
          "options": {
            "aot": true,
            "allowedCommonJsDependencies": [
              "your-config-module-name"
            ],
            "preserveSymlinks": true
          }
        }
      }
    }
  }
  

• 清理缓存
  清理构建缓存和依赖文件，避免旧代码干扰：

  ng clean
  rm -rf node_modules
  npm install
  

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