TranslateService doesn't work on iOS (I think it's file path problem)

Ionic Framework ionic-v3
1

Hi
I’m working on a multi language app , and i’m using TranslateService to apply more than one language and it’s working fine in the browser , however when I run the app on the iPhone I get two problems :
1- the first screen has no words (I think it’s a loading issue because it’s the first screen , didn’t solve it yet)
2- the translations do not work on the iPhone , the translation files path is :
src/app/assets/i18n/(translation file)

here is my code in the app module :

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
import { Page1 } from '../pages/page1/page1';
import { Page2 } from '../pages/page2/page2';
import { Page3 } from '../pages/page3/page3';
import { RegisterTypePage } from '../pages/register-type/register-type';
import { RegisterTruckPage} from '../pages/register-truck/register-truck';
import { RegisterUserPage} from '../pages/register-user/register-user';
import { ShowTrucksPage} from '../pages/show-trucks/show-trucks';
import { ShowTruckInfoPage } from '../pages/show-truck-info/show-truck-info';
import { CustomersRatingsPage } from '../pages/customers-ratings/customers-ratings';
import { TruckOwnerHomePage } from '../pages/truck-owner-home/truck-owner-home';
import { TruckOwnerTruckPage } from '../pages/truck-owner-truck/truck-owner-truck';
import {SelectCityPage} from '../pages/select-city/select-city';
import { HTTP } from '@ionic-native/http';
import {HttpModule, Http} from '@angular/http';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import {EditOwnerContactPage} from "../pages/edit-owner-contact/edit-owner-contact";
import { Camera } from '@ionic-native/camera';
import { IonicStorageModule } from '@ionic/storage';
import { Transfer } from '@ionic-native/transfer';
import { File } from 'ionic-native';
import {TruckOwnerRatingsPage} from '../pages/truck-owner-ratings/truck-owner-ratings';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
export function HttpLoaderFactory(http: Http) {
    return new TranslateHttpLoader(http);
}
@NgModule({
  declarations: [
    MyApp,
    HomePage,
    LoginPage,
    RegisterTypePage,
    RegisterTruckPage,
    RegisterUserPage,
    ShowTrucksPage,
    ShowTruckInfoPage,
    CustomersRatingsPage,
    TruckOwnerHomePage,
    TruckOwnerTruckPage,
    EditOwnerContactPage,
    SelectCityPage,
    TruckOwnerRatingsPage,
    Page1,
    Page2,
    Page3,
    
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot(),
    TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [Http]
            }
        })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    LoginPage,
    RegisterTypePage,
    RegisterTruckPage,
    RegisterUserPage,
    ShowTrucksPage,
    ShowTruckInfoPage,
    CustomersRatingsPage,
    TruckOwnerHomePage,
    TruckOwnerTruckPage,
    EditOwnerContactPage,
    SelectCityPage,
    TruckOwnerRatingsPage,
    Page1,
    Page2,
    Page3,

  ],
  providers: [
    StatusBar,
    SplashScreen,
    HTTP,
    Camera,
    Transfer,
    File,
    {provide: ErrorHandler, useClass: IonicErrorHandler}

  ]
})
export class AppModule {}
2

Did you remote debug the problem on the device already? Follow these instructions here to debug the problem in Safari dev tools: https://ionic.zone/debug/remote-debug-your-app#ios Look at the console and network tabs for errors.

3

that’s new to me ! thanks
however I didn’t understand the last part :
Navigate to the Develop menu in Safari, and select index.html under your device.

I couldn’t find my iPhone even though it is connected to my computer and I enabled the web inspector as in the docs
here is a snippet of the develop menu :

image
Screen Shot 2017-05-26 at 6.15.41 PM.png656×1288 244 KB

4

This happens to me now and again, and generally unplugging the USB connection, waiting a couple seconds, and plugging it back again causes it to reappear.

5

Alternatively, if you are not sure the issue comes from your browser, simply upload your app to Ionic View, and test it from the Ionic View app on your smartphone. To do that in CLI (assuming you created a ionic cloud free account):

  1. go to your project directory
  2. ionic upload (it will ask for password and so)
  3. check your app inside Ionic View app (eventually click options to force to refresh to latest version)

Hope it helps,

6

Incidentally, I think the guess in the topic is accurate. This page suggests using a path of ./assets/i18n/.

7

I restarted safari and unplugged and then plugged the iOS device and it showed up !

8

Another option is to load the i18n file, by http service, that’s what I do in my app (that way it kinda forces to check and load the translation files).

9

here is the code In wrote and still the same problem :
this is the method to change the path of the translation files :
export function createTranslateLoader(http: Http) { return new TranslateHttpLoader(http, './assets/i18n/', '.json'); }

and here is the import :

imports: [
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot(),
    TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [Http]
            }
        })
  ]
10

how can I do that ?
I tried what is in the documentations but that didn’t solve the problem

11

I’ll show my entire code with translation in a few minutes, give me a few minutes :slight_smile:

12

I’m using Ionic 2, so it’s called ng2-translate, but it’s the same code I checked.

So in app.component.ts

import { TranslateService } from 'ng2-translate';
...
export class then constructor ...
    translate.setDefaultLang('XX');

in app.module.ts

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

before @Ngmodule I put :

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

Then in @ngModule declarations I put

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    LoginPage,
etc...
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    TranslateModule.forRoot({
       provide: TranslateLoader,
       useFactory: (createTranslateLoader),
       deps: [Http]
     })
   ], etc...

And then for example in login.html page, I use the pipes:

    <ion-item>
      <ion-label stacked>Email</ion-label>
      <ion-input #email formControlName="email" type="email"
        placeholder="{{ 'EMAIL' | translate }}"
        [class.invalid]="!loginForm.controls.email.valid &&
          loginForm.controls.email.dirty"></ion-input>
    </ion-item>

And this way the translate file is loaded, kinda forced anyways by http service. This will give me issues later on deploy, because I’ll have to put this file on load like my database on a remote location, it will not be loaded on local files in application bundle. Please also note i Put “XX” on default language, it must be a valid iso country code like FR or IT to work, and a file that exists in your i18n assets folder.

13

it worked !
thank you so much :smile:

14

You’re welcome @keloa , glad it helped :slight_smile: