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

Posted 2023-03-13

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

【英文标题】：Module not found: Error: Package path ./locales is not exported from package after angular update to 13

【发布时间】：2021-12-26 10:24:54

【问题描述】：

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

【问题讨论】：

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

【参考方案1】：

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

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

固定代码

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

【参考方案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();
    );

【讨论】：

它也对我有用。谢谢。

【参考方案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`)

【讨论】：

您找到解决方案了吗？我面临着完全相同的错误。我试着像你上次的 sn-p 代码那样做，但没有用。

你能检查一下@/../node_modules/@angular/common/locales/$angularLocale.mjs) 你的机器上有什么

这个 (@/../node_modules/@angular/common/locales/$angularLocale.mjs) 或相对路径适用于我的项目！