Unable to use under WKWebView

I’m submitting a … (check one with “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
[x] feature request

Current behavior

When running it in an ionic app using the cordova-plugin-wkwebview-engine plugin which switches the rendering engine from UIWebWiew to WKWebView I get the following error:

XMLHttpRequest cannot load file:///Users/arroyo/Library/Developer/CoreSimulator/Devices/75D80D9A-1804-4F70-A65F-648A7DCDEE51/data/Containers/Bundle/Application/305DDE17-69E4-4CDA-B7AB-49C0CEED9F6B/AstroPrint.app/www/assets/i18n/config.json. Cross origin requests are only supported for HTTP.

Expected/desired behavior

The config.json can be read without using XMLHttpRequest.

Reproduction of the problem

What is the expected behavior?

The error does not happen.

What is the motivation / use case for changing the behavior?

Using WKWebView is much faster in iOS. Current my project can’t migrate there because of this error.

Please tell us about your environment:

• ng2-translate version: 3.1.x
• Angular version: 2.0.0
• Browser: [ iOS 10 WKWebView ]
• Language: [ TypeScript 2.0]

[larssn]

This plugin seemed to fix my issues: github.com/oracle/cordova-plugin-wkwebview-file-xhr No loader required

Basically it allows file:// paths in wkwebview as far as I can understand.

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