在 Angular 17 的独立组件中使用 @ngx-translate

Question

我在 Angular 17 中使用独立组件。当我使用模块架构时，我没有遇到这个问题。我将其添加到导入中AppModule并且效果很好。

\n

imports: [\n TranslateModule.forRoot(loader)\n],\n

\n

但是如果我添加TranslateModule.forRoot(loader)独立组件

\n

@Component({\n selector: 'app-main-work-space',\n standalone: true,\n imports: [\n  // @ts-ignore\n  TranslateModule.forRoot(loader)\n ],\n templateUrl: './main-work-space.component.html',\n styleUrl: './main-work-space.component.scss'\n})\n

\n

结果我犯了这个错误。

\n

\xe2\x9c\x98 [ERROR] TS-992012: 'imports' contains a ModuleWithProviders value, likely the result of a 'Module.forRoot()'-style call. These calls are not used to configure components and are not valid in standalone component imports - consider importing them in the application bootstrap instead.

\n

我尝试添加@ts-ignore但没有帮助。

\n

我该如何修复它？

\n

Answer 1

我认为您错过了 的importProvidersFrom包装器translation module，请找到下面的工作示例以及额外的示例代码，以帮助您解决问题！

import { Component, importProvidersFrom } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { CommonModule } from '@angular/common';
import { provideHttpClient } from '@angular/common/http';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppModule } from './app/app.module';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import 'zone.js';

// AoT requires an exported function for factories
export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient);
}

@Component({
  selector: 'app-root',
  imports: [CommonModule, TranslateModule],
  standalone: true,
  template: `
    <div>
      <h2>{{ 'HOME.TITLE' | translate }}</h2>
      <label>
        {{ 'HOME.SELECT' | translate }}
        <select #langSelect (change)="translate.use(langSelect.value)">
          <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option>
        </select>
      </label>
    </div>
  `,
})
export class AppComponent {
  constructor(public translate: TranslateService) {
    translate.addLangs(['en', 'fr']);
    translate.setDefaultLang('en');

    const browserLang = translate.getBrowserLang();
    translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
  }
}

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(),
    importProvidersFrom(
      TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient],
        },
      })
    ),
  ],
});

堆栈闪电战

Stackblitz供参考，不是我写的