CODEWITHSUNDEEP
htmlangulartypescriptinternationalizationngx-translate
fangio
fangio

Reputation: 1796

Angular 4 Ngx-translate pipe not working

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,
  ],

ProjectStructure

Upvotes: 11

Views: 18953

Answers (3)

k11k2
k11k2

Reputation: 2044

Could you try like this?

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

Upvotes: 7

dgbt
dgbt

Reputation: 251

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.

Upvotes: 0

muhammad asif
muhammad asif

Reputation: 11

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

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

Upvotes: 0

Related Questions