Ngx-translate: where to define translation assets

Ionic Framework ionic-v3
1

Hi there,

currently I am trying to use ngx-translate. I am following the documentation (https://ionicframework.com/docs/developer-resources/ng2-translate/) but I can´t find where to define the translation assets (for example es.json, en.json), so to speak I don´t know in which document/ data I have to write this.

Thanks for answers,

Robert

2

Json files path:
assets/i18n/en.json

appModule.ts

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

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    CommonModule,
    IonicModule.forRoot(MyApp),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}
3

Hey, thanks for ya answer.

First of all: is it normal that I have to create the i18n-folder manually or should it be automatically created when installing ngx-translate??

Second:
this is my relevant app.module.ts:

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


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

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
  TranslateModule.forRoot(),
  HttpModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [Http]
      }
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})

export class AppModule {
}

When using ionic lab, I get this error:

Typescript Error

Argument of type ‘Http’ is not assignable to parameter of type ‘HttpClient’. Property ‘handler’ is missing in type ‘Http’.

It refers to the function, more specific to the http.

export function createTranslateLoader(http: Http) {
return new TranslateHttpLoader(http, ‘./assets/i18n/’, ‘.json’);
}

Any ideas what might be the reason for this error??

4

Yes.

There are two incompatible HTTP clients in Angular: Http and HttpClient, and you need to pick the one that matches the version of ngx-translate you are using. Your app module is written for dealing with old (7.x core, 0.x http-loader) ngx-translate, whereas you likely want 9.x core, 2.0 http-loader and HttpClient. More upstream docs here.

2 Likes
5

Hey. tried it but still not working…I will continue trying, but thanks