1

I have an ionic 3 project and I want to use ngx translate. It works in the browser and the iOS simulator but not on a real device (tested on iPhone SE, iOS 11.1).

app.module.ts

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

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

@NgModule({
    [...],
    imports: [
        [...]
        HttpClientModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: (HttpLoaderFactory),
                deps: [HttpClient]
            }
        })
    ],
    [...]
})
export class AppModule { }

My files are here:

src/assets/i18n/DE.json

src/assets/i18n/EN.json

I translate it this way:

<ion-title translate>
    {{ 'LOGIN.HEADER' | translate }}
</ion-title>

Does someone know why it won't be translated on a device?

chocolate cake
  • 2,129
  • 5
  • 26
  • 48
  • 1
    Are you using `WKWebView`? – sebaferreras Feb 08 '18 at 15:38
  • 1
    @sebaferreras: I'm using the Ionic WebView. I think it is the WKWebView. – chocolate cake Feb 12 '18 at 07:48
  • I tried to change it to the UIWebView by adding `` to my config.xml, but it didn't solve the problem. – chocolate cake Feb 12 '18 at 08:30
  • 1
    Please take a look at **[this comment](https://github.com/ngx-translate/core/issues/642#issuecomment-344266618)** and let me know if that fixes the issue. Btw you should keep `WkWebView` since `UiWebView` will be deprecated – sebaferreras Feb 12 '18 at 09:20
  • 1
    Thanks for the answer. Unfortunately, I got the error that `.map` does not exist on type `Observable`. So, I couldn't really test it. I tried to rewrite it without success. Then I just wrote `return this.http.get(`./assets/i18n/EN.json`);` From this moment it worked and it also with my old implementation (+ I changed the language file name to lowercase (en.json, de.json) what I have tried already so many times before). So, I don't really know why, but it seems to work now. Thanks for your help! – chocolate cake Feb 12 '18 at 13:13
  • Hmmm that's strange... but glad to hear that you solved the issue :) – sebaferreras Feb 12 '18 at 15:37
  • @chocolatecake, where did you write that? I mean `return this.http.get(./assets/i18n/EN.json);`. Maybe it would help me as well – Alexey Grinko Jan 21 '20 at 15:29
  • I'm not sure, but it could be the code line in part 3 of sebaferreras' comment. I cleared this code in my project cause the old way worked magically. Maybe a total clear and rebuild could work as well? If your problem occurs when you change the language, try to write `LOGIN.HEADER` without the line breaks. (Just now, I've seen I used "translate" duplicate. One of these should be enough.) Hope this helps! – chocolate cake Jan 22 '20 at 07:59
  • try using https://github.com/TheMattRay/cordova-plugin-wkwebviewxhrfix – kumar Sep 28 '20 at 05:39

1 Answers1

1

it might be a bit late, but for those who still experience this issue please do either of the following solutions:

p90n33r
  • 1,671
  • 3
  • 9
  • 6