带有独立组件的 TranslateLoader [Angular16]

Question

我有一个 Angular 16 独立应用程序，但我在翻译导入时遇到问题。

我当前的代码如下所示：

main.ts

*Some non relevant imports*
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';
import { environment } from './environments/environment';
import { HttpClient, provideHttpClient } from '@angular/common/http';
import { importProvidersFrom } from '@angular/core';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

export function createTranslateLoader(http: HttpClient): TranslateHttpLoader {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

const combinedConfig = {
  providers: [
    provideHttpClient(),
    importProvidersFrom(
      TranslateModule.forRoot({
        defaultLanguage: 'en',
        loader: {
          provide: TranslateLoader,
          useFactory: createTranslateLoader,
          deps: [HttpClient],
        },
      })
    ),
    // Otras configuraciones de providers si es necesario
  ],
  ...appConfig, // Expansión de appConfig después de la configuración específica de TranslateModule
};


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

inventario.component.ts

*non relevant imports*

import { TranslateStore, TranslateService,TranslateModule,TranslateLoader} from '@ngx-translate/core';

@Component({
    selector: 'inventario',
    templateUrl: 'inventario.component.html',
    styleUrls: ['inventario.component.scss'],
    host: { 'class': 'u-main-container' },
    standalone: true,
    imports:[CommonModule, StepperNuevaCaptacionComponent, ClarityModule, TranslateModule],
    providers: [CatalogoAprovechamientosService, NotificationService, TranslateService, TranslateStore],
})

我目前遇到的错误是：

错误 NullInjectorError：R3InjectorError（独立 [InventarioComponent]）[TranslateLoader -> TranslateLoader -> TranslateLoader -> TranslateLoader -> TranslateLoader]： NullInjectorError：没有 TranslateLoader 的提供者！

我应该已经将 TranslateLoader 接口导入到我的代码中，但似乎它无法正常工作，我不知道它是什么，我已经被这个问题困扰了好几个星期了。

预先感谢您的任何建议。

已经尝试过下一个链接：

中

GitHub

Answer 1

我认为提供者数组正在被

appConfig

覆盖，你可以尝试这个小改变吗？

如果appConfig有自己的providers数组，那么之前的providers定义将被覆盖而不是合并！

const combinedConfig = {
    ...appConfig, // Expansión de appConfig después de la configuración específica de TranslateModule
    providers: [
      provideHttpClient(),
      importProvidersFrom(
        TranslateModule.forRoot({
          defaultLanguage: 'en',
          loader: {
            provide: TranslateLoader,
            useFactory: createTranslateLoader,
            deps: [HttpClient],
          },
        })
      ),
      ...(appConfig.providers && appConfig.providers.length ? appConfig.providers: [])
      // Otras configuraciones de providers si es necesario
    ],
  };