Angular19+NX模块联邦下ngx-translate报TranslateStore缺失错误求助

问题描述 #

在采用NX、模块联邦与独立组件方案的Angular 19.0.4项目中，使用ngx-translate/core 16.0.3和ngx-translate/http-loader 16.0.0加载组件时，触发以下注入错误：

ERROR NullInjectorError: R3InjectorError(Standalone[RemoteEntryComponent])[TranslateService -> TranslateService -> TranslateStore -> TranslateStore]: 
  NullInjectorError: No provider for TranslateStore!
    at NullInjector.get (core.mjs:1670:27)
    at R3Injector.get (core.mjs:2194:33)
    at R3Injector.get (core.mjs:2194:33)
    at injectInjectorOnly (core.mjs:1110:40)
    at Module.ɵɵinject (core.mjs:1116:60)
    at Object.TranslateService_Factory [as factory] (ngx-translate-core.mjs:16:97)
    at core.mjs:2317:47
    at runInInjectorProfilerContext (core.mjs:875:9)
    at R3Injector.hydrate (core.mjs:2316:21)
    at R3Injector.get (core.mjs:2184:33)

预期行为：组件渲染时显示翻译后的文本。

项目配置 #

app.config.ts #

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { appRoutes } from './app.routes';
import {
  provideTranslateService,
  TranslateLoader,
  TranslateStore,
} from '@ngx-translate/core';
import { HttpClient, provideHttpClient } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

const httpLoaderFactory: (http: HttpClient) => TranslateHttpLoader = (
  http: HttpClient
) => new TranslateHttpLoader(http, './public/i18n', '.json');

export const appConfig: ApplicationConfig = {
  providers: [
    TranslateStore,
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(appRoutes),
    provideHttpClient(),
    provideTranslateService({
      defaultLanguage: 'es',
      useDefaultLang: true,
      loader: {
        provide: TranslateLoader,
        useFactory: httpLoaderFactory,
        deps: [HttpClient],
      },
    }),
  ],
};

独立组件代码 #

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TranslatePipe } from '@ngx-translate/core';

@Component({
  imports: [TranslatePipe, CommonModule],
  selector: 'app-user-entry',
  template: `<div>{{ 'jobKnowledges' | translate }}</div> `,
})
export class RemoteEntryComponent {
}

环境信息 #

• ngx-translate/core: 16.0.3
• ngx-translate/http-loader: 16.0.0
• Angular版本: 19.0.4
• 浏览器：Chrome（桌面版）131.0.6778.139
• Node版本: 20.18.0
• 系统平台: Mac

解决方案 #

原因分析 #

模块联邦场景下，远程独立组件的注入上下文与宿主应用全局注入器隔离。即使宿主app.config.ts中注册了TranslateStore，远程组件也无法直接访问该全局提供者，导致TranslateService依赖的TranslateStore缺失。

修复方案 #

方案1：在远程组件内配置翻译依赖

直接在独立组件的providers数组中注入TranslateStore及完整的翻译服务配置，确保组件自身注入器能获取到所需依赖：

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TranslatePipe, provideTranslateService, TranslateStore } from '@ngx-translate/core';
import { HttpClient, provideHttpClient } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

const httpLoaderFactory: (http: HttpClient) => TranslateHttpLoader = (
  http: HttpClient
) => new TranslateHttpLoader(http, './public/i18n', '.json');

@Component({
  imports: [TranslatePipe, CommonModule],
  selector: 'app-user-entry',
  template: `<div>{{ 'jobKnowledges' | translate }}</div> `,
  providers: [
    TranslateStore,
    provideHttpClient(),
    provideTranslateService({
      defaultLanguage: 'es',
      useDefaultLang: true,
      loader: {
        provide: TranslateLoader,
        useFactory: httpLoaderFactory,
        deps: [HttpClient],
      },
    }),
  ],
})
export class RemoteEntryComponent {
}

方案2：通过模块联邦共享翻译服务

若希望宿主与远程应用共享同一个TranslateService实例，可在模块联邦配置中把相关依赖设为共享项，让远程组件直接使用宿主的全局翻译服务：
在宿主和远程项目的模块联邦配置（如project.json或webpack.config.js）中添加：

shared: {
  '@ngx-translate/core': { singleton: true, strictVersion: true },
  '@angular/common/http': { singleton: true, strictVersion: true },
}

此方案下，远程组件无需单独配置providers，直接复用宿主的翻译服务即可。

验证 #

完成修复后重新构建并运行项目，远程组件应能正常加载TranslateService，渲染出翻译后的文本。

内容的提问来源于stack exchange，提问作者Juan Francisco Ruíz