You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Angular模块联邦NullInjectorError:TranslateService无提供者问题

Angular模块联邦下TranslateService注入失败问题

我基于NX、Angular和Module Federation搭建了项目,包含2个Remote应用、1个Shell应用,以及ui-common、util-common两个共享库。在共享服务TranslationService中,我使用了@ngx-translate库的TranslateService。

每个应用(Shell和Remote)均通过bootstrap函数结合app.config.ts启动应用:

bootstrapApplication(AppComponent, appConfig).catch((err) =>
  console.error(err)
);

所有app.config.ts文件均通过如下方式提供包含TranslateService的NgxTranslateRoutesModule:

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({eventCoalescing: true}),
    provideRouter(appRoutes),
    provideHttpClient(),
    importProvidersFrom([
      TranslateModule.forRoot({
        defaultLanguage: 'en',
        useDefaultLang: true,
        loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient],
        },
      }),
      NgxTranslateRoutesModule.forRoot()
    ]),
}

单独运行Remote应用时一切正常,但运行Shell应用时,在bootstrap.ts:6和core.mjs:6620出现如下错误:

NullInjectorError: NullInjectorError: No provider for TranslateService!
    at NullInjector.get (core.mjs:1660:27)
    at R3Injector.get (core.mjs:3106:33)
    at R3Injector.get (core.mjs:3106:33)
    at injectInjectorOnly (core.mjs:1107:40)
    at ɵɵinject (core.mjs:1113:60)
    at inject (core.mjs:1199:12)
    at new TranslationService (translation.service.ts:15:37)
    at Object.TranslationService_Factory [as factory] (translation.service.ts:58:4)
    at core.mjs:3234:47
    at runInInjectorProfilerContext (core.mjs:872:9)

我在TranslationService中通过private _translateService = inject(TranslateService);注入该服务(使用Angular 18)。

关键问题:当将module-federation.config.ts中的2个Remote移除后,一切恢复正常,但我不能这么做:

import { ModuleFederationConfig } from '@nx/webpack';

const config: ModuleFederationConfig = {
  name: 'shell',
  remotes: [] // <--- 空数组(原为['remote1', 'remote2'])
};

export default config;

我认为这与依赖共享有关,但无法理清思路,请求帮助。

已尝试的操作:

  • 移除代码中与TranslateService相关的关联,错误仍存在,推测可能与TranslateLoader有关。
  • 在模块联邦配置中将@ngx-translate/core设置为shared = false,错误仍存在。
  • 直接提供TranslateService而非模块,出现循环依赖错误。
  • 删除node_modules文件夹并重新安装所有依赖。

内容的提问来源于stack exchange,提问作者rd.vdw

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.19 08:11:12