ngx translate not working on iOS device

Question

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?

Answer 1

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

• Update ngx-translate to the latest version by running npm install @ngx-translate/core & npm install @ngx-translate/http-loader
• or follow this solution for a CustomLoader from https://github.com/ngx-translate/core/issues/642#issuecomment-344266618 by sebaferreras
• or follow the solution on this post Ionic 3 Response with status: 0 for URL: null by CodeChanger