未找到模块：错误：包路径 ./locales 在角度更新到 13 后未从包中导出

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 上运行良好。

Answer 1

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

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

固定代码

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

Answer 2

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

}

Answer 3

添加系统无效

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 错误。 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`)