angularjs 带有独立组件的TranslateLoader [Angular16]

fcipmucu  于 6个月前  发布在  Angular
关注(0)|答案(1)|浏览(54)

我有一个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],
})


我目前遇到的错误是:
ERROR NullInjectorError:R3 InjectorError(Standalone[InventarioComponent])[TranslateLoader -> TranslateLoader-> TranslateLoader-> TranslateLoader -> TranslateLoader]:NullInjectorError:没有TranslateLoader的提供程序!
我sunphold已经导入到我的代码中的TranslateLoader接口,但似乎它不能正常工作,我不能告诉它是什么,我已经坚持了几个星期了。
提前感谢您的任何建议。
已尝试下一个链接:
Medium
GitHub

3phpmpom

3phpmpom1#

我认为providers数组被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
    ],
  };

字符串

相关问题