Ionic view & ngx-translate problem

Ionic Framework ionic-v3
1

Hello,

i am using ionic2 and the latest ngx translate for multi language support.
This is actually all working great in the android simulator and when testing in the browser.

But testing ios by using ionic view does not do the translation.

Is that maybe an issue with ionic view?

My implementation is like:

app.module.ts

import { TranslateModule, TranslateLoader } from ‘@ngx-translate/core’;
import { TranslateHttpLoader } from ‘@ngx-translate/http-loader’;

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

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

app.components.ts

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

translate.setDefaultLang(‘en’);
translate.use(‘en’);

2

I solved it myself!
For everybody who runs in to the same problem:

Just change the path to the json files to ‘assets/i18n/’, ‘.json’.

1 Like
3

Hi,

I still have the same issue. Even changing the path doesn’t help. Translation only works when I do “ionic lab” on the console or start the app in the iOS simulator.

When I directly deploy to an iPhone or use ionic view it does’t work. :frowning2:

$ ionic info

Your system information:

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.3.0
ios-deploy version: 1.9.1 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v7.7.4
Xcode version: Xcode 8.3 Build version 8E162
4

When I locally use livereload the it works on an iPhone.

Works on device:
ionic run --device -l

Does not work on device:
ionic run --device

Can please someone explain this strange behavior?

5

Found a solution.

I have deleted the www folder in the root path. The i18n files under www/assets/i18n/*.json had capital letters. But ionic3+ngx-translate6 was asking for i18n files with lowercase letters.

rm -rf www
ionic build 
ionic run ios --device
6

Can you show us some sample code in the view with the pipe, please? (works fine on Android here). And yes often it’s a matter of wrong file location (default path to i18n is wrong, so you have to rephrase to it a bit).

Aka my setup:

In app.component.ts

import { Http } from '@angular/http';
import { TranslateService } from 'ng2-translate';

in constructor too (blabla before…,translate: TranslateService) {

and…
translate.setDefaultLang('ZZ');

}

In app.module.ts

import { something } from ‘something’;

…

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

…

  imports: [
    IonicModule.forRoot(MyApp),
    TranslateModule.forRoot({
       provide: TranslateLoader,
       useFactory: (createTranslateLoader),
       deps: [Http]
     })
   ]

Then you have to load files, from the relevant folder.

And in the view (.html file) it gives that:

<ion-item>
  <ion-label stacked>First Name</ion-label>
  <ion-input type="text"
    placeholder="{{ 'FIRSTNAME' | translate }}"></ion-input>
</ion-item>

I’m using ng2-translate, but I think it’s the same logic. Hope that helps :slight_smile:

7

A post was split to a new topic: Ngx-translate and Ionic 3?

8

@slange thanks for the explanation. I seem to be having the same problem you are had, I looked int the www folder to see if there is any uppercase on my i18n folder but the all looks great. I can get it to work with live reload on simulator but not device. Also, I can’t get the this.translateService.instant("menu.mSignup"), to work correct.

My imports:

.....
import { TranslateModule } from 'ng2-translate/ng2-translate';
import { TranslateLoader, TranslateStaticLoader, TranslateService } from 'ng2-translate/src/translate.service';
import { Geolocation } from '@ionic-native/geolocation';
....

My createTranslateLoader

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

imports: [
   .....
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: (createTranslateLoader),
      deps: [Http]
    }),
  .....
  ],

And finally where I did my initialization. It works already on the browser and on simulator with live reload but not on the device itself.

initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      // setting the default language
      this.translateService.setDefaultLang(defaultLanguage);

      // if this is a cordova application
      if ((<any>window).cordova) {
        Globalization.getPreferredLanguage().then(result => {
          let language = this.getSuitableLanguage(result.value);
        //let language = navigator.language.split("-")[0];
        console.log("This is the language selection from globalization: " + language);
        this.translateService.use(language);
        })
      } else {
        let browserLanguage = this.translateService.getBrowserLang() || defaultLanguage;
        let language = this.getSuitableLanguage(browserLanguage);
        this.translateService.use(language);
      }
    });
  }

Thanks for your help in advance.

9

Did you try with relative path?

'./assets/i18n' or 'assets/i18n'

10

Have you found a solution to this yet @bsakweson ?

I’m having the same problem. The path is correct and relative (assets/i18n) and it is working when viewing the app in a browser. But when I open xcode and open the app in a simulator the translation does not work.

I also checked the www/ folder in the platforms/ios/ folder, but everything looks fine.

11

On my app, with ng2 pipes, I force the client to load json files at every load by a url in http. This might help you solve your problem by forcing a refresh (ng2 or Ngx, I’m upgrading my codebase to ngx too).

So here is the code in app.module.ts

First part up in page

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

Second part down in page

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    LoginPage
  ...
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseConfig, myFirebaseAuthConfig),
    TranslateModule.forRoot({
       provide: TranslateLoader,
       useFactory: (createTranslateLoader),
       deps: [Http]
     })
   ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    LoginPage,
  ...
  ],
  providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    AuthData
  ]
})
export class AppModule {}

Hope this helps, as Ngx works more or less exactly the same as Ng2! And my trick is to use http deps to force the load of json translation files at every app load/access.

1 Like
12

Thanks, I was still using ng2. I have upgraded to NGX and now everything is working in IOS! Thank you so much for the help.

13

Nice, good to hear @justed, it will sure help others :slight_smile:

14

Because of lazy loading and the modules has different injectors. you should define ngxTranslateModule in the app.module.ts and register it using forRoot static method, then in each lazy loaded module or in the shared module if you use, you should use forChild method without passing and arguments to it .

For more info, read this interesting section

I have also uploaded my code with working example in the following gists