Module not found: Error: Package path ./locales is not exported from package after angular update to 13

Question

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.

Personally

change import statement to have /node_modules/@angular/common/locales and try in v13 – Marivelmariya

Answer 1

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`)

Temperance

Answer 2

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`)

Personally

Did you find a solution ? I am facing the exact same error. I tried to do like your last snippet code but didn't work. – Garofalo

Can you check @/../node_modules/@angular/common/locales/${angularLocale}.mjs) what you have on your machine – Personally

This (@/../node_modules/@angular/common/locales/${angularLocale}.mjs) or a relative path works on my project! – Christiano

Answer 3

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();
    });
}

}

Backspin