ngx-translate with Angular 2

I wanted to add internationalization (i18n) support via ngx-translate to my MEAN application that I created with ng-fullstack generator but there was a warning which said
“if you’re still on Angular <4.3, please use Http from @angular/http with http-loader@0.1.0."

So, I should use "Http" module from "@angular/http" instead of "HttpClient" module from "@angular/common/http".

I also need the correct version of http-loader:

npm install @ngx-translate/http-loader@0.1.0 --save

Here is the configuration that I use to cope with it: (Please note that my i18n folder and app.module.ts file are both under the same folder)

import { NgModule } from "@angular/core";
import { HttpModule, Http } from "@angular/http";
import { FormsModule, FormBuilder } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { App } from "./app";
import { ReCaptchaModule } from 'angular2-recaptcha';
import { TranslateModule, TranslateLoader } from "@ngx-translate/core";
import { TranslateHttpLoader } from "@ngx-translate/http-loader";
export function HttpLoaderFactory(httpClient: Http) {
return new TranslateHttpLoader(httpClient, "i18n/", ".json");
imports: [
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [Http]
declarations: [
providers: [
bootstrap: [
export class AppModule { }
view raw app.module.ts hosted with ❤ by GitHub
defaultJSExtensions: true,
paths: {
// paths serve as alias
'npm:': './'
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'angular2-recaptcha': 'node_modules/angular2-recaptcha',
'@ngx-translate/core': 'node_modules/@ngx-translate/core/bundles/core.umd.js',
'@ngx-translate/http-loader': 'node_modules/@ngx-translate/http-loader/bundles/http-loader.umd.js',
// other libraries
'rxjs': 'npm:rxjs'
packages: {
app: {
format: 'register',
defaultExtension: 'js'
'angular2-recaptcha': {
defaultExtension: 'js',
main: 'index'
'@ngx-translate/core': {
defaultExtension: 'js'
'@ngx-translate/http-loader': {
defaultExtension: 'js'
view raw config.js hosted with ❤ by GitHub

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: