Dynamic Import of Locales in Angular
Lazy load your locale when changing countries.
The other day I read ‘Using TypeScript Dynamic Imports in Angular’ by Netanel Basal where he says:
TypeScript 2.4 added support for dynamic
import()expressions, which allow us to asynchronously load and execute ECMAScript modules on demand.
This sounded like something I had to try! I already had the perfect use case from my previous article ‘Custom Angular Pipes and Dynamic Locale.’ The problem with having all these languages is that for each one you need to import the data of the locale. That is a lot of extra code taking up bandwidth.
It would be great if we can dynamically import the language when needed. All sounds good in theory. Let’s see if it also works in practice.
This article was written while I was trying to get the imports working. I have not censored the errors I ran into in the hope that it will help someone who runs into the same issues.
At the end, I have a link to example code on GitHub.
And now let’s start our journey!
The Goal
- Remove import statements for locales
- Replace switch statement with dynamic import
- Lazy loading
