Question

0

647

Views

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

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.

9 months ago · Santiago Trujillo

3 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-04-19T21:42:18.225Z

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

Answer 2 · 2022-04-19T21:42:18.237Z

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

}

Answer 3 · 2022-04-19T21:42:18.245Z

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