ngx-translate 错误：没有 TranslateStore 的提供者

Question

当前行为 当我尝试将 ngx-translate/core (16.0.3) 与 ngx-translate/http-loader (16.0.0) 和 Angular (19.0.4) 一起使用时 该项目使用 NX 和模块联合以及独立组件方法。

加载组件时出现以下错误：

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)
handleError @ core.mjs:6813
next @ core.mjs:35628
next @ Subscriber.js:91
_next @ Subscriber.js:60
next @ Subscriber.js:31
(anonymous) @ Subject.js:34
errorContext @ errorContext.js:19
next @ Subject.js:27
emit @ core.mjs:6194
(anonymous) @ core.mjs:6696
invoke @ zone.js:369
run @ zone.js:111
runOutsideAngular @ core.mjs:6550
onHandleError @ core.mjs:6696
handleError @ zone.js:373
runGuarded @ zone.js:124
api.microtaskDrainDone @ zone.js:2325
drainMicroTaskQueue @ zone.js:588
Promise.then
nativeScheduleMicroTask @ zone.js:557
scheduleMicroTask @ zone.js:568
scheduleTask @ zone.js:391
onScheduleTask @ core.mjs:6319
scheduleTask @ zone.js:382
onScheduleTask @ zone.js:271
scheduleTask @ zone.js:382
scheduleTask @ zone.js:205
scheduleMicroTask @ zone.js:225
scheduleResolveOrReject @ zone.js:2528
resolvePromise @ zone.js:2462
(anonymous) @ zone.js:2370
(anonymous) @ zone.js:2386
webpackJsonpCallback @ remoteEntry.mjs:13854
(anonymous) @ default-node_modules_pnpm_ngx-translate_core_16_0_3__angular_common_19_0_4__angular_core_19_0-44e48b.js:1

预期行为 渲染我的组件时应该出现翻译后的文字。

使用 NX、具有动态导入的模块联合和 Angular 19 以及 ngx-translate/core 16.0.3 和 ngx-translate/http-loadere 16.0.0 来全新安装项目

然后，在我的 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-翻译/核心：16.0.3 ngx-翻译/http-loader: 16.0.0 角度版本：19.0.4

浏览器：

• [X] Chrome（桌面）版本131.0.6778.139

对于工具问题：

• 节点版本：20.18.0
• 平台：Mac

如果需要，我将提供更多信息。

Answer 1

provideTranslateService

已经有提供程序

TranslateStore

，您可以删除此提供程序，代码应该可以编译。

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

---

public-api.ts - 源代码

export const provideTranslateService = (config: TranslateModuleConfig = {}): EnvironmentProviders =>
{
  return makeEnvironmentProviders([
    config.loader || {provide: TranslateLoader, useClass: TranslateFakeLoader},
    config.compiler || {provide: TranslateCompiler, useClass: TranslateFakeCompiler},
    config.parser || {provide: TranslateParser, useClass: TranslateDefaultParser},
    config.missingTranslationHandler || {provide: MissingTranslationHandler, useClass: FakeMissingTranslationHandler},
    TranslateStore,
    {provide: ISOLATE_TRANSLATE_SERVICE, useValue: config.isolate},
    {provide: USE_DEFAULT_LANG, useValue: config.useDefaultLang},
    {provide: USE_EXTEND, useValue: config.extend},
    {provide: DEFAULT_LANGUAGE, useValue: config.defaultLanguage},
    TranslateService
  ]);
}