TypeScript 2.4 added support for dynamic import() expressions, which allow us to asynchronously load and execute ECMAScript modules on demand.
Trying to dynamically import the localize but facing the issue with export
Module not found: Error: Package path ./locales is not exported from package ....\node_modules\@angular\common (see exports field in .....\node_modules\@angular\common\package.json)
I have the below code
let angularLocale = convertAbpLocaleToAngularLocale(abp.localization.currentLanguage.name);
import(`@angular/common/locales/${angularLocale}.js`)
.then(module => {
registerLocaleData(module.default);
NgxBootstrapDatePickerConfigService.registerNgxBootstrapDatePickerLocales().then(_ => {
resolve(true);
abp.ui.clearBusy();
});
}, reject);
Quite not sure how can I export this, it was working fine with angular 12.
Adding a system didn't work
let angularLocale = convertAbpLocaleToAngularLocale(abp.localization.currentLanguage.name);
System.import(`@angular/common/locales/${angularLocale}.js`)
.then(module => {
registerLocaleData(module.default);
NgxBootstrapDatePickerConfigService.registerNgxBootstrapDatePickerLocales().then(_ => {
resolve(true);
abp.ui.clearBusy();
});
}, reject);
Reference - https://github.com/angular/angular/issues/20487
Update
We don't need to use System.import these days... I think that a dynamic ES import expression might be enough...
let angularLocale = convertAbpLocaleToAngularLocale(abp.localization.currentLanguage.name);
import(`@angular/common/locales/${angularLocale}.js`).then(module => registerLocaleData(module.default));
With the above code, I still face the exception. In that case, I was hitting angular/angular-cli#22154 - this is a webpack bug. https://github.com/angular/angular/issues/20487 https://github.com/angular/angular-cli/issues/22154
import(
/* webpackExclude: /\.d\.ts$/ */
/* webpackMode: "lazy-once" */
/* webpackChunkName: "i18n-extra" */
`@/../node_modules/@angular/common/locales/${angularLocale}.mjs`)
As mentioned in the https://github.com/angular/angular-cli/issues/22154 issue, you need to update the import path with /node_modules/@angular/common/locales/${locale}.mjs.
The below code works for me in my AspNetZero project after upgrading to angular version 13.
NOTE: Make sure to restart "ng serve" command after these changes for webpack to do its magic.
async function registerLocales(resolve: (value?: boolean | Promise<boolean>) => void, reject: any, spinnerService: NgxSpinnerService) {
if (shouldLoadLocale()) {
let angularLocale = convertAbpLocaleToAngularLocale(abp.localization.currentLanguage.name);
await import(`/node_modules/@angular/common/locales/${ angularLocale }.mjs`)
.then(module => {
registerLocaleData(module.default);
NgxBootstrapDatePickerConfigService.registerNgxBootstrapDatePickerLocales().then(_ => {
resolve(true);
spinnerService.hide();
});
}, reject);
} else {
NgxBootstrapDatePickerConfigService.registerNgxBootstrapDatePickerLocales().then(_ => {
resolve(true);
spinnerService.hide();
});
}
}
I had the same problem that I fixed by modifying the import path adding 'node_modules/...'
original code:
import(`@angular/common/locales/${angularLocale}.js`)
fixed code
import(`/node_modules/@angular/common/locales/${angularLocale}.js`)