Ngx-translate not working with WKWebView in ios

Ionic Framework ionic-v3
1

It works fine if I remove WKWebView.

Here’s a closed ticket on the ngx-translate repo, doesn’t seem like there’s any help from that angle. Anyone else have a workaround?

2

I would try asking if CoDanny ever wrote that custom loader and if he could share it on Github for us all.

3

I use both ngx-translate and WkWebView and doesn’t face any problem (yet) on iOS

Which version of ngx-translate (core and http) are you using? Same for WkWebView?
How do you load your translations file in you app.module?
Do you have child modules? And if yes, do you instanciate nix-translate there too?

4

@reedrichards I should clarify - this was working before I upgraded to Ionic 3, so something has changed with the upgrade.

5

“ng2-translate”: “^5.0.0”,

I’ve removed wkwebview at the moment just so it can work, but it was the latest version. There’s a noticeable difference in responsiveness without it though, would definitely prefer to use wkwebview.

6

@beck24 I could rectify too then, I use both ngx-translate and WkWebView and Ionic 3 and doesn’t face any problem (yet) on iOS

7

you could have a look at that thread about ngx-translate and Ionic 3

https://forum.ionicframework.com/t/ngx-translate-and-ionic-3/?source_topic_id=87418
8

Latest ngx is 6. Be careful. The package name changed as some bc breaks. 5 is not the latest

9

I did, nobody mentioned anything about wkwebview when I last saw it. Someone has since responded on the ngx-translate github issue pointing out that ionic has forked wkwebview and said that this is one of the bugs they fixed in it. Going to give that a try…

10

@beck24 I think @ajhowaboutsales pointed something interesting, if you use ng2-translate (version 5) that might be the problem?

I use

"@ngx-translate/core": "^6.0.1",
"@ngx-translate/http-loader": "0.0.3"
11

I updated the Ionic docs for ngx-translate: https://ionicframework.com/docs/resources/ng2-translate/

1 Like
12

Perfect, thanks guys. On my way out, but will follow up on this later. Will report back with hopefully a successful outcome :slight_smile:

1 Like
13

Thanks for all the answers, but still no dice. Using ngx-translate/core 6.0.1 and ngx-translate/http-loader 0.0.3 using the updated docs.

Works great on the web, haven’t tested android, but in ios getting the same CORS error

image
Screen Shot 2017-04-23 at 12.44.20 AM.png999×484 92.8 KB

14

Its referencing a local file url of your host computer. Are you sure its trying to load a correct url?

15

Well that’s on the xcode iphone simulator on my computer so I expect it would be referencing that file. If I remove WKWebView it works just fine with the exact same code base, so as far as I can tell it’s correct.

16

I like the fact that you app name is Mordor.app :wink:

How do you load the translation in you app.module.ts? could you show some code?

17

Thanks :slight_smile:

Sure - it’s just as documented:

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

imports: [
        BrowserModule,
        IonicModule.forRoot(MyApp),
        HttpModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: (createTranslateLoader),
                deps: [Http]
            }
        }),
        ChartsModule,
        ElasticModule,
        IonicStorageModule.forRoot()
    ],

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

@beck24 looks like exactly the same as my code, but I don’t face your error :frowning:

so it may not be a problem of the lib and the implementation, also since it’s working fine in your browser, maybe the CORS problem comes because of the confix.cml? just an idea, maybe check “access origin” or “allow-navigation” or “allow-intent href=“http:///””?

or CSP in index.html?

just some idea, I really don’t know precisely

20

@beck24 did you ever resolve this? I just moved up to Ionic 3 and WKWebView and am having the exact same problem.

21

Unfortunately I couldn’t find a solution, I just gave up on WKWebView