Angular 4 Ngx-translate pipe not working

Question

I want to make an angular 4 app that is multilangual. I have followed the answer on Angular 2 - Multilingual Support but it doesn't work.

I did every step, from 1 to 5 on that page and my appmodule looks the same.

I have a file en.json in a folder i18n, located in my assets folder. The file contains

{ "TEST":"little test"}

and in my HTML:

 <a [routerLink]="['/home']" class="tile waves-effect waves-light btn-large">
  <span> {{ "TEST" | translate }}</span>
 </a>

And when I use it I get TEST instead of little test. This is really annoying because I want to add multiple languages.

edit
I've added this code to my appmodule.ts (only necessary added)

import {HttpClientModule, HttpClient} from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';

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

@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    HttpClientModule,
    MaterializeModule.forRoot(),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
    FormsModule,
    JsonpModule,
    routing,
    BrowserAnimationsModule,
  ],

score 7 · Accepted Answer · answered Aug 07 '17 at 09:30

7

Could you try like this?

export function HttpLoaderFactory(http: Http) { return new TranslateHttpLoader(http, "./assets/i18n/", ".json"); }

answered Aug 07 '17 at 09:30

k11k2

2,036
2
22
36

1

In your case you need to use `http: HttpClient` only. – k11k2 Aug 07 '17 at 09:41
new ERROR: AppComponent_Host.html:1 ERROR Error: No provider for TranslateService! – fangio Aug 07 '17 at 09:44
`import { TranslateService } from '@ngx-translate/core'` in your respective .ts file – k11k2 Aug 07 '17 at 09:46
could you provide your project architecture and are you using angular-cli? – k11k2 Aug 07 '17 at 09:51
Then it should work man.try to add this code in your respective `.ts` file `constructor(private translate: TranslateService) { translate.addLangs(['en', 'es']); translate.setDefaultLang('en'); let browserLang = translate.getBrowserLang(); translate.use(browserLang.match(/en|es/) ? browserLang: 'en') }` – k11k2 Aug 07 '17 at 09:56
I use my translate pipe in another components than app.component – fangio Aug 07 '17 at 10:02
it doesn't matter, it will get the browser language. write this code in `app.component.ts` – k11k2 Aug 07 '17 at 10:04
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/151254/discussion-between-fangio-and-k11k2). – fangio Aug 07 '17 at 10:08

score 0 · Answer 2 · edited Feb 09 '19 at 09:30

0

First import traslate service to featured module. Inside module constructor use:

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

edited Feb 09 '19 at 09:30

Andronicus

25,419
17
47
88

answered Feb 09 '19 at 07:55

muhammad asif

1

score 0 · Answer 3 · answered Apr 16 '19 at 05:55

You have to setup i18n correctly. Which means in the best case these imports in your app.module.ts for ionic4:

// i18n and globalization
import { Globalization } from '@ionic-native/globalization/ngx';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

If you don't know how to install Globalization or why to use see: https://ionicframework.com/docs/native/globalization

You should create this Default loader Method:

export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

and Import the Translate Module

imports: [
..., // other stuff above
TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            }
        }),
... // other stuff beyond
]

Now you can use the Globalization to get infos about the device if on cordova system:

this.globalization.getPreferredLanguage()

or set hard code with pre defined strings the language in the Modules you need.

this.translate.setDefaultLang(locale);
this.translate.use(locale);

But best practice here is to include that stuff into a shared Module and import this module on pages, components etc.

NOTE: Don't forget, if you do not tell the translation Service which language to use, it will ever display the string you try to transform with your translation pipe in the templates and you won't see any errors in the most cases.

Angular 4 Ngx-translate pipe not working

3 Answers3

Linked