Problem with WKWebView

I’m submitting a … (check one with “x”)

[x] bug report => check the FAQ and search github for a similar issue or PR before submitting
[ ] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request

Current behavior When using WKWebView with Ionic 2, the translation file is loaded, but the translation tokens are not shown until you do something (like changing of tab which I think triggers change detection). I tried to trigger the change detection manually, but it didn’t work. The onLangChange observable works. Was working fine in UIWebView.

I also that the earlier the package is initialized, the more often the bug happens.

Expected/desired behavior The translation tokens to be replaced by the actual translation strings.

Reproduction of the problem You see the code used here.

Please tell us about your environment:

• ng2-translate version: 3.1.2
• Angular version: 2.0.0
• Browser: iOS 10 WKWebView
• Language: TypeScript 2.0

[biesbjerg]

This should be solved now. Uninstall wkwebview and install it again.

[carlgik4]

I google a lot and finally got the ngx-translate to work: First, upgrade cordova and ionic cli to latest version

`xxx:Tabs u$ cordova -v 7.1.0

xxx:Tabs u$ ionic -v 3.16.0

xxx:Tabs u$ ionic info

cli packages: (/Users/xxx/NPM/lib/node_modules)

@ionic/cli-utils  : 1.16.0
ionic (Ionic CLI) : 3.16.0

global packages:

cordova (Cordova CLI) : 7.1.0 

local packages:

@ionic/app-scripts : 3.0.1
Cordova Platforms  : ios 4.5.3
Ionic Framework    : ionic-angular 3.8.0

System:

Android SDK Tools : 25.3.1
ios-deploy        : 1.9.2 
ios-sim           : 6.1.2 
Node              : v6.11.5
npm               : 3.10.10 
OS                : macOS Sierra
Xcode             : Xcode 9.0 Build version 9A235 

Environment Variables:

ANDROID_HOME : /Applications/Android/sdk

Misc:

backend : pro`

create a brand new project

ionic start Tabs sidemenu
cd Tabs
npm install @ngx-translate/core @ngx-translate/http-loader --save

The new project will use wkwebview as default, and there are some error with the usage docs: https://ionicframework.com/docs/developer-resources/ng2-translate/ we should use HttpClientModule instead of HttpModule For the app.module.ts

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

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

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

For app.component.ts

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

export class MyApp {
  constructor(public platform: Platform, public splashScreen: SplashScreen,
    translate: TranslateService) {
    translate.setDefaultLang('en');
    let browserLang = translate.getBrowserLang();
    translate.use(browserLang.match(/en|zh/) ? browserLang : 'en');
  }
}

After that, create i18n folder in src/assets create en.json { “HELLO” : “hello” }

For page usage, you can use pipe

{{'HELLO' | translate}}

or manually:

export class HomePage {
  constructor(public navCtrl: NavController,
    private translateService: TranslateService) {
      this.translateService.get('HELLO').subscribe(
        value => {
          // value is our translated string
          let alertTitle = value;
          console.log("translate alert title:" + alertTitle);
        }
      )
  }
}

Hope you save your life with these code.