Angular 5 offers a solution for loading i18n locale dynamically using registerLocaleData
https://angular.io/guide/i18n#i18n-pipes
I am interested in loading the locale based on a dynamic setting, such as one stored in localStorage. I tested loading a single locale (fr) first:
import(`@angular/common/locales/fr`).then(locale => {
registerLocaleData(locale.default);
});
This approach works without any issues.
Next, I tried loading the locale based on a value from localStorage like this:
const localeName = localStorage.getItem('locale') || 'en';
import(`@angular/common/locales/${localeName}`).then(locale => {
registerLocaleData(locale.default);
});
Surprisingly, this method also works well and successfully loads the desired locale. However, when building the project using Angular CLI, since it doesn't know which locale to bundle at build time, it bundles all of them. While this is acceptable, the build process generates a warning for each loaded locale:
Module build failed: Error: node_modules\@angular\common\locales\af-NA.d.ts is not part of the compilation output. Please check the other error messages for details.
WARNING in ./node_modules/@angular/common/locales/af-NA.js.map Module parse failed: Unexpected token (1:10) You may need an appropriate loader to handle this file type.
I have attempted to include the locale *.ts files and exclude *.map files but the build process seems to disregard them.
Here is my tsconfig.app.json:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"baseUrl": "./",
"module": "esnext",
"types": []
},
"exclude": [
"test.ts",
"**/*.spec.ts",
"../node_modules/@angular/common/locales/**/*.map"
],
"include": [
"**/*",
"../node_modules/@angular/common/locales/**/*.ts"
]
}
To enable dynamic imports, TypeScript requires esnext as the module setting. It does not function properly with es2015.