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.

change import statement to have /node_modules/@angular/common/locales and try in v13 — crh225, Nov 30 '21 at 22:10

score 7 · Answer 1 · answered Dec 30 '21 at 19:08

7

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

answered Dec 30 '21 at 19:08

MLizamaA

71
1

San Jaisy · Answer 2 · 2021-11-16T02:15:46.150

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

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. — Yvan, Nov 22 '21 at 16:10
Can you check `@/../node_modules/@angular/common/locales/${angularLocale}.mjs`) what you have on your machine — San Jaisy, Nov 23 '21 at 04:37
This (`@/../node_modules/@angular/common/locales/${angularLocale}.mjs`) or a relative path works on my project! — McGiogen, Dec 29 '21 at 10:44

score 2 · Answer 3 · answered Dec 26 '21 at 03:58

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

}

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

3 Answers3