angular - האם אני צריך להגדיר webpack עבור ES6?

יש לי אפליקציית אנגולר עם קובץ .tsconfig המיועד ל-ES6.

{
  "compileOnSave": false,
  "compilerOptions": {
    "allowJs": true,
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es6",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom",
      "es2018.promise"
    ]
  }
}

רכיב הזוויתי הבא (Typescript):

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { DispositifsDATIRoutingModule } from './dispositifsDATI.routes';
import { SharedModule } from '../shared/shared.module';
import { DISPOSITIFS_DATI_COMPONENTS } from './index';

import { InputUtilitiesModule } from 'ng-uikit-pro-standard';
import { MaterialChipsModule, BadgeModule, IconsModule, WavesModule } from 'ng-uikit-pro-standard';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    SharedModule,
    HttpClientModule,
    DispositifsDATIRoutingModule,
    InputUtilitiesModule,
    MaterialChipsModule,
    BadgeModule,
    IconsModule,
    WavesModule
  ],

  declarations: [DISPOSITIFS_DATI_COMPONENTS]
})

export class DispositifsDATIModule { }

מזוהה על ידי webpack ל:

/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DispositifsDATIModule", function() { return DispositifsDATIModule; });

שנכשל בזמן ריצה עם:

ReferenceError: אין אפשרות לגשת ל-'DispositifsDATIModule' לפני אתחול

אין לי שום מושג מה קורה כאן.

האם יש משהו לשנות בקונפיגורציית ה-webpack סביב השימוש ב-ES6?

עריכה: נראה שזו בעיה ב-angular ו/או TypeScript בנוגע ל-ES2015

תשובה #1

אני מניח שיש לך תלות מעגלית כאן, קובץ הרכיב שלך (נניח שזה MyComponent.ts) מייבא את DISPOSITIFS_DATI_COMPONENTS מ-./index.ts בעוד ש-index.ts מייבא את הרכיב מ-./MyComponent.ts.

אז הם תלויים זה בזה. במקרה כזה, DISPOSITIFS_DATI_COMPONENTS יכול לא להיות מאותחל בזמן שבו אתה משתמש בו.

אני הייתי מחלץ את זה לקובץ שלישי כדי להימנע מתלות מעגלית

עדכון: הנה מאמר מועיל https://blog.angularindepth.com/how-to-break-a-cyclic-dependency-between-es6-modules-fd8ede198596

תשובה #2

בסדר, השגיאה הזאת נגרמה משום שהפניתי למודול שהשתמש בדקורטורים של TypeScript. הסרתי את הדקורטורים לטובת ה-API המקביל והבעיה נעלמה.

עדכון 04/09/2019:

רק כדי להיות ברורים, השתמשתי ב-Angular 7.5 שדורש שהאפשרות emitDecoratorMetadata תקבע ל-true. הרגע למדתי שהמודול החיצוני שלי דורש experimentalDecorators ולא emitDecoratorMetadata.

אז, שדרוג ל-Angular 8 והגדרת emitDecoratorMetadata ל-false מאפשרים לי להשתמש בספרייה חיצונית זו.