Invalid provider for the NgModule. Only instances of Provider and Type are allowed, got: [?[object Object]?, ...]

Issue

In my app, I want to introduce internationalization for language. So I have 2 files '.json' with translations. I've got the error:

Invalid provider for the NgModule 'TranslateModule' - only instances of Provider and Type are allowed, got: [?[object Object]?, ...]

I don't see what I am doing wrong. Here is the 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 { }

Here is the 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();
}

Here is the setting for internationalization language.

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');
  }
}

Could you propose some solutions or tell me what I am doing wrong?

Solution

I find another way that works.

Imports TranslateService and TranslateModule from @ngx-translate/core;

Use HttpLoaderFactory and TranslateLoader in app.module.ts:

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


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

Make sure that '.json' files are in /assets/i18n . This is the default folder for getting json for translation.

Answered By - Buda Sergiu Flavius