2

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

4

3 回答 3

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 错误。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`)
于 2021-11-15T13:53:34.093 回答
1

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

}

于 2021-12-26T03:58:59.160 回答
0

我通过修改导入路径添加'node_modules / ...'
原始代码来解决相同的问题：

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

固定代码

import(`/node_modules/@angular/common/locales/${angularLocale}.js`)
于 2021-12-30T19:08:27.147 回答