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
相关产品推荐
相关产品推荐

