Angular路由模块函数中使用inject()触发NG0203错误求助

NG0203错误的核心原因是：远程模块加载失败的catch回调不属于Angular的注入上下文（比如构造函数、工厂函数、组件生命周期钩子等），直接调用inject()会因为当前没有活跃的注入器而报错。下面是几种可行的解决办法：

1. 提前注入所需服务，在错误处理中复用 #

在处于注入上下文的位置（比如组件构造函数、根模块构造函数）提前注入TranslateService，将其保存为实例变量，之后在错误处理回调中直接使用：

import { TranslateService } from '@ngx-translate/core';
import { Component } from '@angular/core';

@Component({
  // 组件配置
})
export class AppComponent {
  constructor(private translateService: TranslateService) {
    this.setupRemoteRoutes();
  }

  setupRemoteRoutes() {
    this.routes = [
      {
        path: 'micro-frontend',
        loadChildren: () => 
          import('remote-mf-module').catch(() => {
            // 使用提前注入的TranslateService获取本地化文本
            const errorText = this.translateService.instant('mf.load.failed');
            // 展示错误弹窗
            this.openErrorModal(errorText);
            // 返回备用模块，避免路由状态异常
            return import('./fallback/fallback.module').then(m => m.FallbackModule);
          })
      }
    ];
  }

  openErrorModal(message: string) {
    // 弹窗逻辑实现
  }
}

2. 使用全局注入器执行上下文内的逻辑 #

先在根模块中保存全局注入器实例，之后在错误回调中通过runInContext方法包裹需要依赖注入的逻辑，确保代码运行在注入上下文内：

// 根模块中保存全局注入器
import { Injector, NgModule } from '@angular/core';
export let GlobalInjector: Injector;

@NgModule({
  // 模块配置
})
export class AppModule {
  constructor(injector: Injector) {
    GlobalInjector = injector;
  }
}

// 路由配置中的错误处理
loadChildren: () => 
  import('remote-mf-module').catch(() => {
    return GlobalInjector.runInContext(() => {
      const translateService = inject(TranslateService);
      const errorText = translateService.instant('mf.load.failed');
      openErrorModal(errorText);
      return import('./fallback/fallback.module').then(m => m.FallbackModule);
    });
  })

3. 直接使用TranslateService而非TranslatePipe #

TranslatePipe底层依赖TranslateService，在代码逻辑中直接调用TranslateService的方法（如instant或get）比注入Pipe更合理，也能避免不必要的依赖问题。如果需要异步获取翻译文本（比如语言包还未加载完成），可以使用get方法：

loadChildren: () => 
  import('remote-mf-module').catch(() => {
    this.translateService.get('mf.load.failed').subscribe(errorText => {
      this.openErrorModal(errorText);
    });
    return import('./fallback/fallback.module').then(m => m.FallbackModule);
  })

关键注意点 #

• 远程模块加载失败后，务必返回一个备用模块，防止路由处于异常状态。
• 如果使用translateService.get()，要处理异步逻辑，避免弹窗展示延迟或空白。

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