Setting your language with Angular i18n

Although ahead-of-time (AOT) compilation of template strings can be useful, users may often wish to be able to manually decide the language that they would like to see, and have that served to them as a just-in-time (JIT) option. To support this, we will need to add providers to Angular to watch for a locale setting we can use to determine our user's language preference.

Let's configure our application to display whatever language the browser is defaulted to using. That way, content will automatically be displayed in any translation that matches the machine that they are using to access our application.

Getting ready

Before we can get started, to take advantage of just-in-time localization in Angular, we will have to eject our project from Angular-CLI:

ng eject

This is necessary to access the WebPack configuration file. After ejecting the project, you will have a new file in your project called webpack.config.js.

We will need to add a new module rule to...