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:
I have en.json file in the following location after I build the app for PWA:
<MY_APP_FOLDER>\www\assets\i18n
In my app.module.ts, I have the following code:
export function createTranslateLoader(http: Http) {
return new TranslateStaticLoader(http, '../assets/i18n', '.json');
}
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
@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:
Well, it didn’t when I tried it. This is what I get:
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?
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?
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?
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.
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 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.