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!