Core: Problem with WKWebView

[Bouzmine]

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

[duydao]

@Bouzmine I'm having the same problem. Did you find a workaround?

[barocsi]

+1

[biesbjerg]

I think this is a problem with the wkwebview plugin. See https://github.com/driftyco/cordova-plugin-wkwebview-engine/issues/78

[biesbjerg]

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

[SamVerschueren]

Thanks for following up on this @biesbjerg! I'm going to close this one because it seems that it's not ng2-translate whose failing.

[luckylooke]

On Ionic2 project. I had a problem to make work wkwebview engine plugin and translations together. Solved by installing ionic fork of the plugin. https://github.com/ionic-team/cordova-plugin-wkwebview-engine

[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.