ngx-translate 的问题（Angular 17，独立组件）

Question

我已经开始了一个新项目，我打算使用 ngx-translate 来提供翻译。但有一个问题。

当然，我是通过npm安装的，并且我已经实现了app组件中的所有代码，并在app.config.ts中进行了配置。它仍然给我这个错误：

Internal server error: R3InjectorError(Standalone[_AppComponent])[_TranslateService -> _TranslateService -> InjectionToken USE_EXTEND -> InjectionToken USE_EXTEND]: 
  NullInjectorError: No provider for InjectionToken USE_EXTEND!
      at NullInjector.get (c:/Users/germano.spina/Desktop/Angular/sft/sicily-food-tour/node_modules/@angular/core/fesm2022/core.mjs:1654:27)
      at R3Injector.get (c:/Users/germano.spina/Desktop/Angular/sft/sicily-food-tour/node_modules/@angular/core/fesm2022/core.mjs:3093:33)
      at R3Injector.get (c:/Users/germano.spina/Desktop/Angular/sft/sicily-food-tour/node_modules/@angular/core/fesm2022/core.mjs:3093:33)
      at injectInjectorOnly (c:/Users/germano.spina/Desktop/Angular/sft/sicily-food-tour/node_modules/@angular/core/fesm2022/core.mjs:1100:40)
      at Module.ɵɵinject (c:/Users/germano.spina/Desktop/Angular/sft/sicily-food-tour/node_modules/@angular/core/fesm2022/core.mjs:1106:42)
      at Object.TranslateService_Factory (c:/Users/germano.spina/Desktop/Angular/sft/sicily-food-tour/node_modules/@ngx-translate/core/dist/fesm2022/ngx-translate-core.mjs:708:259)
      at eval (c:/Users/germano.spina/Desktop/Angular/sft/sicily-food-tour/node_modules/@angular/core/fesm2022/core.mjs:3219:47)
      at runInInjectorProfilerContext (c:/Users/germano.spina/Desktop/Angular/sft/sicily-food-tour/node_modules/@angular/core/fesm2022/core.mjs:866:9)
      at R3Injector.hydrate (c:/Users/germano.spina/Desktop/Angular/sft/sicily-food-tour/node_modules/@angular/core/fesm2022/core.mjs:3218:21)
      at R3Injector.get (c:/Users/germano.spina/Desktop/Angular/sft/sicily-food-tour/node_modules/@angular/core/fesm2022/core.mjs:3082:33) (x2)

我是初学者，所以我真的不知道如何解决这个问题。

我尝试添加错误提示缺少的所有内容。这是我的 app.config.ts:

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideClientHydration } from '@angular/platform-browser';
import { HttpClient, provideHttpClient } from '@angular/common/http';
import { TranslateCompiler, TranslateLoader, TranslateService, TranslateStore, TranslateFakeCompiler, TranslateParser, TranslateDefaultParser, MissingTranslationHandler, FakeMissingTranslationHandler, USE_DEFAULT_LANG, USE_STORE, USE_EXTEND } from '@ngx-translate/core';
import { HttpLoaderFactory } from './http-loader.factory';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideClientHydration(),
    provideHttpClient(),
    {
      provide: TranslateLoader,
      useFactory: HttpLoaderFactory,
      deps: [HttpClient]
    },
    TranslateService,
    TranslateStore,
    {
      provide: TranslateCompiler,
      useClass: TranslateFakeCompiler
    },
    {
      provide: TranslateParser,
      useClass: TranslateDefaultParser
    },
    {
      provide: MissingTranslationHandler,
      useClass: FakeMissingTranslationHandler,
    },
    {
      provide: USE_DEFAULT_LANG,
      useValue: true,
    },
    {
      provide: USE_STORE,
      useValue: true,
    },
  ]
};

但是每次我添加新的提供者时，都会出现新的错误。

我启动了该项目，当我在终端中输入

ng serve

时，全是空白，它给了我一个错误：

ngx-translate

出了问题。

那么，我该如何解决这个问题？

Answer 1

尝试将其添加到您的 appConfig 提供程序列表中（并删除您添加的所有内容）：

importProvidersFrom(TranslateModule.forRoot())

这将为您的应用程序提供从translateModule到服务