javascript - מודול לא נמצא: שגיאה: נתיב החבילה ./locales לא מיוצא מהחבילה לאחר עדכון אנגולר ל-13

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

לא בטוח לגמרי איך אני יכול לייצא את זה, זה עבד טוב עם אנגולר 12.

תשובה #1

הייתה לי את אותה בעיה שפתרתי על ידי שינוי נתיב הייבוא והוספת 'node_modules/...'
קוד מקורי:

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

קוד מתוקן

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

תשובה #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`)