Angular14升级至17后遭遇NG0203 inject()注入上下文错误求助

核心问题定位 #

你的错误堆栈显示触发点在RouterModule_Factory，说明不是main.ts中的代码导致，而是依赖版本不兼容或注入上下文异常引发的RouterModule初始化失败。先明确runInInjectionContext的适用边界，再针对性解决问题。

runInInjectionContext正确使用场景 #

不需要使用的场景（90%的常规代码） #

• 组件/服务的构造函数：天然处于注入上下文，直接通过构造函数注入或inject()调用都有效
• 组件生命周期钩子（如ngOnInit）：只要服务是通过构造函数注入的，直接调用即可，无需额外包裹
• 服务内部方法：已通过构造函数注入的依赖，直接使用，不需要包装runInInjectionContext

必须使用的场景 #

仅当你需要在非注入上下文环境中调用inject()时才需要，比如：

• 独立工具函数中需要获取Angular服务
• 异步回调（如setTimeout、Promise.then）中需要注入服务
• 原生事件监听器（如addEventListener）的回调逻辑
• Angular bootstrap完成后的外部代码（如你main.ts中的bootstrapModule.then回调）

分步解决方案 #

1. 修正错误的runInInjectionContext用法 #

你当前在组件和服务中的用法完全冗余，直接删除即可：

组件优化后代码

export class MyComponent{
   constructor(private service1: FirstService, private service2: SecondService) {}

   ngOnInit() {
       // 直接使用构造函数注入的服务
       this.service1.someMethod();
       this.service2.someMethod();
   }
}

服务优化后代码

@Injectable()
export class MyService{
   constructor(private service2: SecondService) {}

   ServiceMethod() {
       return this.service2.SecondServiceMethod();
   }
}

2. 修复依赖版本兼容性 #

错误根源大概率是Angular与NX版本不匹配或重复依赖：

• 执行nx migrate latest同步所有依赖版本（NX 18需确保完全兼容Angular 17.3.2）
• 检查重复安装的Angular包：运行npm ls @angular/core，若出现多个版本，删除node_modules和package-lock.json，重新执行npm install
• 执行nx reset清理NX缓存，再重新构建项目

3. 优化main.ts代码（避免inject()调用） #

你当前main.ts的逻辑是正确的，但可以用更直观的方式获取服务，避免上下文问题：

platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .then(platformRef => {
        const authService = platformRef.injector.get(AuthService);
        const notificationService = platformRef.injector.get(NotificationService);
        const coBrandingService = platformRef.injector.get(CoBrandingService);
        const coreCacheService = platformRef.injector.get(CoreCacheService);
        const eventService = platformRef.injector.get(EventService);
        const loginService = platformRef.injector.get(LoginService);
        
        authService.RegisterHook(notificationService);
        authService.RegisterHook(coBrandingService);
        authService.RegisterHook(coreCacheService);
        authService.RegisterHook(eventService);
        authService.RegisterHook(loginService);
    });

4. 检查RouterModule配置 #

错误触发于RouterModule工厂函数，确认AppModule中RouterModule导入正确：

import { RouterModule } from '@angular/router';

@NgModule({
  imports: [
    RouterModule.forRoot([
      // 你的路由配置项
    ])
  ],
  // ...其他模块配置
})
export class AppModule {}

5. 调整NX构建配置 #

• 移除tsconfig.base.json中compilerOptions.paths里的@angular/*自定义路径（除非有特殊需求，否则让包管理器自动解析）
• 确保项目project.json中build.options.preserveSymlinks设置为true

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