Ionic App - PWA - Internationalization Fails

I have implemented Internationalization in my Ionic App. It works fine with ionic serve and on devices too. However, it is failing when I generate a PWA using ionic cordova build --prod command.

What I have and the way I am doing it is as below:

  1. I have en.json file in the following location after I build the app for PWA:

<MY_APP_FOLDER>\www\assets\i18n

  1. In my app.module.ts, I have the following code:
export function createTranslateLoader(http: Http) {
	return new TranslateStaticLoader(http, '../assets/i18n', '.json');
}
  1. Once built, I copy the contents of <MY_APP_FOLDER>\www directory into my web server’s (Azure App Service Web App) root directory.

After this when I access the app from my webserver, I get the login page and the PWA functions work fine. But my Internationalization doesn’t. It only shows the tags I have in my en.json file intead of their values (i.e. the actual text to be displayed).

I am at a loss on what is going wrong. It showing the tags means it is finding the en.json file. But in developer console it shows a 404 (Not Found) in pollyfills.js, as below:

GET https://<MY_AZURE_WEB_APP>.azurewebsites.net/assets/i18n/en.json 404 (Not Found) polyfills.js:3

Mistyped here?

Where is the en.json actually located in the built app?

@Sujan12 - Not really. Why? I am following this link to do what I am doing. That command sans the cordova keyword is mentioned in the second last line of second paragraph.
What should it be otherwise?

As I mentioned in bullet #1 in my original post, after the build is done, it is located in:

<MY_APP_FOLDER>\www\assets\i18n

Yes, but why are you running this command with cordova? This shouldn’t even work without a platform…

Then it is actually impossible that https://<MY_AZURE_WEB_APP>.azurewebsites.net/assets/i18n/en.json returns a 404, isn’t it?

Well, it didn’t when I tried it. This is what I get:

image

I sincerely hope, you don’t think that I (or anybody) will put/ask something in the forum just for the sake of it and without trying to resolve it on their own first.

As I mentioned in my post, I am assuming that it does find the file as it is showing the tags/labels in the file but not the actual text for those tags/labels. That error appears to pointing to polyfills.js for en.json?

You should upgrade your Ionic CLI then. You are on an older version (<3.7) that didn’t support this command.

Aren’t the tags what you use in the templates to identify the strings?
I still don’t know: Does the file actually exist there or not?

Okay, that might be the thing. I am at 3.6.0 and skeptical to update it as I am in the critical time of my delivery. Any idea if running the command with cordova in it should be a problem?

Correct. They are but it is still not working.

Yes.

Yes, this shouldn’t even work. ionic cordova commands fan out to the Cordova CLI, which should not be involved here.
Use npm run ionic:build as a replacement for ionic build with older CLI versions.

Ok, but then your conclusion “It showing the tags means it is finding the en.json file” is not necessarily correct, right?

Post your ionic info output please.

Check the network tab please which file it is requesting and if this really returns a 404. If the file is there, a script requesting it can impossibly get a 404.

Okay, will do. Thanks!

Perhaps I didn’t understand your first question then. Let me put here what I have for Internationalization and how it displays:

app.module.ts has:

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

app.component.ts has:

import { TranslateService } from 'ng2-translate/ng2-translate';

@Component({
    templateUrl: 'app.html'
})
export class MyApp {
    constructor(public platform: Platform, public statusBar: StatusBar,
                public splashScreen: SplashScreen, private http: Http,
                private translate: TranslateService, public events: Events,
                public menu: MenuController, public toastCtrl: ToastController,
                public alertCtrl: AlertController, private authService: AuthService) {
        this.initializeApp();
    }

    initializeApp() {
        this.platform.ready().then(() => {
            this.statusBar.styleDefault();
            this.splashScreen.hide();
            
            let userLang = navigator.language.split('-')[0];
            userLang = userLang.match(/cn|en|es|ja|it|ru/) ? userLang : 'en';
            this.translate.setDefaultLang('en');

            this.translate.use(userLang);
        });
    }
}

en.json looks like this:

{
    "LOGIN_PAGE": {
        "LoginWithMicrosoftButtonLabel": "LOGIN WITH MICROSOFT",
        "DemoLoginButtonLabel" : "DEMO"
    }
}

Following is how I am using the above en.json labels in my login.html:

<ion-content class="login-content" padding>
    <ion-item text-center>
        <img src="assets/img/login_banner.PNG"/>
    </ion-item>
    <div>
        <button (click)="login()" ion-button block type="button">{{'LOGIN_PAGE.LoginWithMicrosoftButtonLabel' | translate}}</button>
        <BR/>
        <button (click)="login()" ion-button block type="button">{{'LOGIN_PAGE.DemoLoginButtonLabel' | translate}}</button>
        <ion-item text-center>
            <img src="assets/img/icon.png"/>
        </ion-item>
    </div>
</ion-content>

And this is how it displays on the PWA UI:

image

As you can see, it is just printing LOGIN_PAGE.LoginWithMicrosoftButtonLabel instead of the actual value. But all this works fine with ionic serve and on the device as well.

My 'ionic info` is:

cli packages:

    @ionic/cli-plugin-cordova       : 1.5.0 (C:\<MY_APP_FOLDER>\node_modules\@ionic\cli-plugin-cordova)
    @ionic/cli-plugin-ionic-angular : 1.4.0 (C:\<MY_APP_FOLDER>\node_modules\@ionic\cli-plugin-ionic-angular)
    @ionic/cli-utils                : 1.6.0 (C:\<MY_APP_FOLDER>\node_modules\@ionic\cli-utils)
    ionic (Ionic CLI)               : 3.6.0 (C:\<MY_APP_FOLDER>\node_modules\ionic)

global packages:

    Cordova CLI : 7.0.1

local packages:

    @ionic/app-scripts : 1.3.12
    Cordova Platforms  : android 6.1.2 browser 4.1.0
    Ionic Framework    : ionic-angular 3.3.0

System:

    Android SDK Tools : 25.2.5
    Node              : v6.11.1
    OS                : Windows 7
    npm               : 5.3.0

which is just the “identifier” of the translation you want to display:

This is default behaviour if the translation is missing (or can not be loaded).

Sooner or later you should update all of these.

Are you using the browser platform for anything?

My guess is still the path it is trying to load the translations from is not the correct one.

You say the file that it is showing as 404, actually exists and you can manually open it. Correct?

The network tab and console should tell you exactly what is going on here. If the file exists, it can not 404 without an additonal error message. Actually, it can not 404 at all - something you are not telling us.

It is showing polyfills.js:

image

Would appreciate if you could please give some pointers on resolving those other 404 as well.

Ah, you could have mentioned that before… There is more broken than just the en.json.

What happens when you right click one of those 404 and choose “Open in New Tab”?

Tangentially, TranslateService has a convenient getBrowserLang() method that would obviate the need for this stuff:

let userLang = navigator.language.split('-')[0];
userLang = userLang.match(/cn|en|es|ja|it|ru/) ? userLang : 'en';