模块未找到错误：Error: 在将Angular更新到13后，包路径./locales未从包中导出。

Question

TypeScript 2.4新增了对动态import()表达式的支持，使我们能够按需异步加载和执行ECMAScript模块。

尝试动态导入本地化模块时遇到了导出问题。

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)

我有以下代码：

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

我不太确定如何导出这个内容，在使用 Angular 12 的时候一切正常。

- San Jaisy

---

将导入语句更改为/node_modules/@angular/common/locales并在v13中尝试。 - crh225

Answer 1

我也遇到了同样的问题，通过修改导入路径添加“node_modules/...”解决了问题。
原始代码：

import(`@angular/common/locales/${angularLocale}.js`)

修复的代码

import(`/node_modules/@angular/common/locales/${angularLocale}.js`)

- MLizamaA

Answer 2

添加系统失败

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

参考 - https://github.com/angular/angular/issues/20487

更新

现在我们不需要使用System.import了...我认为动态的ES导入表达式可能已经足够了...

let angularLocale = convertAbpLocaleToAngularLocale(abp.localization.currentLanguage.name);
import(`@angular/common/locales/${angularLocale}.js`).then(module => registerLocaleData(module.default));

使用上述代码后，我仍然遇到了异常。在这种情况下，我遇到的是angular/angular-cli#22154 - 这是一个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`)

- San Jaisy

---

你找到解决方案了吗？我也遇到了完全相同的错误。我尝试了你最后一段代码的方法，但是没有起作用。 - Yvan

你能检查一下你的机器上是否有 @/../node_modules/@angular/common/locales/${angularLocale}.mjs 这个文件吗？ - San Jaisy

这个(@/../node_modules/@angular/common/locales/${angularLocale}.mjs)或者相对路径在我的项目中可以工作！ - McGiogen

Answer 3

如https://github.com/angular/angular-cli/issues/22154问题中所提到的，您需要使用/node_modules/@angular/common/locales/${locale}.mjs更新导入路径。

在升级到 Angular 版本 13 后，以下代码在我的 AspNetZero 项目中有效。

注意：请确保在更改后重新启动 "ng serve" 命令，以便 webpack 进行其魔法操作。

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

}

- Balran Chavan