TranslateModule Configuration Not Working

Question

I have created the following file to isolate ngx-translate configuration:

import {
  Http
} from '@angular/http';
import {
  TranslateHttpLoader
} from '@ngx-translate/http-loader';
import {
  TranslateLoader,
  TranslateModuleConfig
} from '@ngx-translate/core';

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

export function translateModuleConfig(): TranslateModuleConfig {
  return {
    loader: {
      provide: TranslateLoader,
      useFactory: HttpLoaderFactory,
      deps: [Http]
    }
  };
}

Then I'm simply using the following inside my app module imports section:

TranslateModule.forRoot(translateModuleConfig)

But it's not actually working anymore, unlike when I had the configuration directly inline instead of the function. What am I doing incorrectly?

Answer 1

Try changing your function to this:

export function translateModuleConfig() {
  return {
    loader: {
      provide: TranslateLoader,
      useFactory: HttpLoaderFactory,
      deps: [Http]
    }
  };
}

and then in your app modules do this:

TranslateModule.forRoot(translateModuleConfig());