Translation Angular 2 using ngx-translate?

Question

I have all configuration and setting following instructions.

app.module.ts

import {  Http } from '@angular/http';
import {TranslateModule, TranslateStaticLoader, TranslateLoader, TranslateService } from 'ng2-translate';

imports: [
    BrowserModule,
    HttpModule,
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: (http: Http) => new TranslateStaticLoader(http, '/assets/i18n', '.json'),
      deps: [Http]
    })
]

Component:

import {TranslateService,TranslatePipe } from 'ng2-translate';

constructor( private activateRoute: ActivatedRoute, public translate: TranslateService) {
    translate.addLangs(['en']);
    translate.setDefaultLang('en');

  }

And view component:

{{ 'Intro' | translate }}

This library does not work for me, it alwsays displays key of word Intro instead value translations.

There are not any errors in console. Why ngx-translate does not work or what I do wrong.

Did you create en.json file inside i18n folder and list Intro in that file? — Nehal
– Nehal, Commented Jul 28, 2017 at 17:31

ghaliano · Accepted Answer · 2017-08-20 09:54:40Z

2

if you're still on Angular <4.3, please use Http from @angular/http with [email protected].

so running

npm install @ngx-translate/[email protected] --save

did the trick for me

Source: ngx-translate/core

answered Aug 20, 2017 at 9:54

ghaliano

4157 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nehal · Accepted Answer · 2017-07-28 18:18:42Z

1

Looking at your code can't really tell what's not working. One difference I noticed is, I did my setup using HttpLoaderFactory provided by ngx-translate doc. I'll provide my full setup and you can compare it with your code, if it helps to detect any issues :)

Setup:

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

app.module.ts:

// i18n library
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

@NgModule({
  ...
  imports: [
    ...
    TranslateModule.forRoot({
      loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [Http]
      }
    })
  ]

src > assets > i18n > en.json:

{
  "Intro" : "This is intro!"
}

component.ts:

import { TranslateService } from '@ngx-translate/core';

export class Component{

  constructor(translate: TranslateService){
    this.translate.setDefaultLang('en');
  }
}

component.html:

{{ 'Intro' | translate }}

answered Jul 28, 2017 at 18:18

Nehal

13.3k4 gold badges48 silver badges59 bronze badges

10 Comments

Daniel Over a year ago

I have the same code, really it does not work, may be I installed another version ?

Nehal Over a year ago

Yea, it could be an older version issue. From your import statement, it looks like you are using an older version, latest version uses @ngx-translate instead of ng2-translate. Also, you are not using the HttpLoaderFactory, I suggest try using that.

Daniel Over a year ago

What is HttpLoaderFactory in imports?

Daniel Over a year ago

I got this error:

core.es5.js:1084 ERROR Error: Uncaught (in promise): Error: Response with status: 404 Not Found for URL: /assets/i18n/en.json

Nehal Over a year ago

Read the answer again. I mentioned it in the answer with a link too. It's the library ngx-translate team tells you to use in the documentation. Also, I added the npm install step for it in the answer too.

|

Collectives™ on Stack Overflow

Translation Angular 2 using ngx-translate?

2 Answers 2

Comments

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related