ngx translate not working on iOS device

1
votes

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?

1
iosionic-frameworkionic3ngx-translate
Are you using WKWebView? – sebaferreras
@sebaferreras: I'm using the Ionic WebView. I think it is the WKWebView. – chocolate cake
I tried to change it to the UIWebView by adding <preference name="CordovaWebViewEngine" value="CDVUIWebViewEngine" /> to my config.xml, but it didn't solve the problem. – chocolate cake
Please take a look at this comment and let me know if that fixes the issue. Btw you should keep WkWebView since UiWebView will be deprecated – sebaferreras
Thanks for the answer. Unfortunately, I got the error that .map does not exist on type Observable<string>. 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

1 Answers

1
votes

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