Currently, the only way to do JIT compilation for localization in Angular is to eject your project from Angular-CLI. This has some additional complexity and overhead to it, but it gives us the customization options we need in WebPack to enable this functionality. Future versions of Angular will support JIT language compilation as an add-on in Angular-CLI.

After ejecting, we configure WebPack to support loading language templates as raw modules in our build system. This lets us load the specific language file that we need when the client first loads Angular. We get those files into Angular through our custom i18n-provider. This provider may look complicated, but all it's doing is registering a promise with Angular's launch process that looks up and loads the correct language file for whatever document.locale is set to. If the value is empty, or a language doesn't exist, the provider simply resolves no changes for the application's configuration and will load as normal.

The document.locale property is our own custom value that we use to drive the language displayed to the user. By mapping this to navigator.language, we can get language options pre-populated for us by many browsers. There are many other ways we could modify this property as well, including saving and loading it from a cookie.