Photo by Lucas George Wendt on Unsplash
Angular PWA Internationalization
Angular PWA app fully supports i18n
What is Internationalization (i18n)?
Internationalization, sometimes referenced as i18n, is the process of designing and preparing your project for use in different locales worldwide. Localization is the process of building versions of your project for other locales.
What is Angular proposed way problem?
Angular built-in have a way that your Angular app to support Internationalization. Still, the approach doesn't fit PWA apps because after you apply this approach, you don't have a single app, but in practice, you have an app for every language, so this is not compatible with PWA ecosystems. To find more detail, please check the Github issue and StackOverflow question that describe the problem.
Now I think we are on the same page. let's start.
Use ngx-translate
Instead of using the built-in translation features of Angular, you can use ngx-translate.
The ngx-translate
produce a single app at the end, so it fixes the built-in angular problem, as I mentioned before.
a simple example
To demonstrate the solution I proposed, I prepared an example. You can see the code on Github or test the demo on this link. If you want more detail about ngx-translate
see the ngx-translate
documentation.
The end
My goal is to help you! If you are still unsure or have questions about it, or if there are errors, please use the comments section below and let me know!