Search code examples
ioscordovangx-translate

ngx-translate not working on iOS device (Cordova)

First, I've read the previous threads regarding this. And none of the solutions worked for me.

I have a Cordova-based app (not ionic) which is deployed on android and iOS. Everything works fine except that my translations doesn't work on iOS devices (neither simulator or real device). I'm using ngx-translate and it there's no problem in the browser or on Android-devices.

Here's my setup:

app.module.ts 

TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),

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

app.component.ts

import localeSv from '@angular/common/locales/sv';
ngOnInit(): { 
this.translate.setDefaultLang('se');  
registerLocaleData(localeSv); 
}

Implementation:

<div translate>Click to close</div>

I've also tried using other translate styles like this.translateService.instant('something'), but it's not working.

After running cordova build ios I can see that my se.json file is in the correct folder: /assets/i18n/se.json

Version info:

"@ngx-translate/core": "^11.0.1",
"@ngx-translate/http-loader": "^4.0.0"
  • 9.0.0 ([email protected])
  • ios 5.1.1
  • using WKWebViewOnly
  • allowing all http-intent and http-navigation in config.xml

Plugins:

  • cordova-plugin-customconfigparameters 3.0.0 "Custom Config Parameters"
  • cordova-plugin-device 2.0.3 "Device"
  • cordova-plugin-geolocation 4.0.2 "Geolocation"
  • cordova-plugin-splashscreen 5.0.3 "Splashscreen"
  • cordova-plugin-whitelist 1.3.4 "Whitelist"
  • cordova-plugin-wkwebview-engine 1.2.1 "Cordova WKWebView Engine"
  • onesignal-cordova-plugin 2.9.0 "OneSignal Push Notifications"
  • skwas-cordova-plugin-datetimepicker 2.1.1 "DateTime picker"

If anyone has any idea of what it could be I'd really appreciate the help. Been stuck on this for days.

Solution

  • If there's anyone else with the same problem. I solved it by loading my json file and setting the translation manually:

    Import your .json file:

    import jsonSe from '../assets/i18n/se.json';

    Use the translation service to set language manually:

        let jsonSeData = (jsonSe as any);
    this.translate.setTranslation('se', jsonSeData, true);