NgModule的提供程序无效。只允许Provider和Type的实例，得到：[？[object Object]？，...]

Question

在我的应用程序中，我想介绍语言的国际化。所以我有2个文件'.json'和翻译。我有错误：

NgModule'TranslateModule'的提供程序无效 - 只允许Provider和Type的实例，得到：[？[object Object]？，...]

我不明白我做错了什么。这是app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {TranslateModule} from 'ng2-translate';

import {AppComponent} from './app.component';
import {NavbarComponent} from './components/navbar/navbar.component';
import {RouterModule} from '@angular/router';
import {appRoutes} from './app.route';
import {DoctorsComponent} from './pages/doctors/doctors.component';
import {HomeComponent} from './pages/home/home.component';
import {HospitalsComponent} from './pages/hospitals/hospitals.component';
import {HttpClientModule} from '@angular/common/http';
import {FormsModule} from '@angular/forms';
import {translateFactory} from './TranslateFactory.component';
import {TranslateLoader} from '@ngx-translate/core';


@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    HomeComponent,
    DoctorsComponent,
    HospitalsComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot(
      appRoutes,
      {enableTracing: false}
    ),
    TranslateModule.forRoot({
      loader: {
        provider: TranslateLoader,
        useClass: (translateFactory)
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是TranslateFactory.component.ts

import * as enTranslate from '../i18n/en.json';
import * as roTranslate from '../i18n/ro.json';
import { of, Observable } from 'rxjs';
import { TranslateLoader as NgxTranslateLoader } from '@ngx-translate/core';

const TRANSLATIONS = {
  en: enTranslate,
  ro: roTranslate
};

export class TranslateLoader implements NgxTranslateLoader {

  public getTranslation(lang: string): Observable<any> {
    return of(TRANSLATIONS[lang]);
  }
}

export function translateFactory() {
  return new TranslateLoader();
}

这是国际化语言的设置。

import { Component } from '@angular/core';
import {TranslateService} from 'ng2-translate';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  constructor(
    private translate: TranslateService
  ) {
    translate.addLangs(['ro', 'en']);
    translate.setDefaultLang('ro');
    const browserLang = translate.getBrowserLang();
    translate.use(browserLang.match(/ro|en/) ? browserLang : 'ro');
  }
}

你能提出一些解决方案或告诉我我做错了什么吗？

Answer 1

TranslateModule.forRoot({
  loader: {
    provider: TranslateLoader,
    useClass: (translateFactory)
  }
})

使用useFactory而不是useClass。使用provide而不是provider。

import {TranslateModule} from 'ng2-translate';

使用@ngx-translate/core而不是ng2-translate。

Answer 2

我找到了另一种有效的方法。

从@ngx-translate/core;导入TranslateService和TranslateModule

在app.module.ts中使用HttpLoaderFactory和TranslateLoader：

TranslateModule.forRoot({
          loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [HttpClient ]
          }
        })


export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

确保'.json'文件位于/ assets / i18n中。这是获取json进行翻译的默认文件夹。