Мне нужно настроить webpack для ES6?

У меня есть приложение angular с файлом .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 { }

переносится веб-пакетом в:

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

Что не удается во время выполнения с:

ReferenceError: невозможно получить доступ к DispositifsDATIModule до инициализации

Понятия не имею, что здесь происходит.

Есть ли что-то изменить в конфигурации веб-пакета в связи с использованием ES6?

РЕДАКТИРОВАТЬ: похоже, это проблема в angular и / или TypeScript относительно ES2015


typescript angular es6-modules
person Olivier MATROT    schedule 04.07.2019    source источник
comment
Я получал эту ошибку из-за ошибки в ts-коде. Когда я перешел к URL-адресу маршрута, он дал мне более конкретное сообщение об ошибке.   -  person Andres    schedule 10.09.2019

Ответы (2)


arrow_upward
1
arrow_downward

Хорошо, эта ошибка была вызвана тем, что я ссылался на модуль, который использовал декораторы TypeScript. Я удалил декораторы в пользу эквивалентного API, и проблема исчезла.

ИЗМЕНИТЬ 09.04.2019:

Чтобы быть ясным, я использовал Angular 7.5, который требует, чтобы emitDecoratorMetadata должно быть установлено значение true. Я только что узнал, что моему внешнему модулю требуются экспериментальныеДекораторы, а не emitDecoratorMetadata.

Итак, обновление до angular 8 и установка emitDecoratorMetadata на false позволяет мне использовать эту внешнюю библиотеку.

person Olivier MATROT    schedule 10.07.2019

arrow_upward
0
arrow_downward

Я предполагаю, что у вас здесь круговые зависимости, ваш файл компонента (скажем, MyComponent.ts) импортирует DISPOSITIFS_DATI_COMPONENTS из ./index.ts, а index.ts импортирует компонент из ./MyComponent.ts.

Итак, они зависят друг от друга. В этом случае DISPOSITIFS_DATI_COMPONENTS не может быть инициализирован к тому моменту, когда вы его используете.

Я бы извлек его в третий файл, чтобы избежать циклических зависимостей

UPD: вот полезная статья https://blog.angularindepth.com/how-to-break-a-cyclic-dependency-between-es6-modules-fd8ede198596

person Yozi    schedule 04.07.2019
comment
Спасибо, но после просмотра нашего кода это не проблема с циклическими ссылками. Вопрос обновлен. - person Olivier MATROT; 05.07.2019
comment
Добавленные вами ссылки относятся к циклическим зависимостям. Говорят, у нас здесь круговые зависимости, но так быть не должно. Тем не менее, единственный способ получить вашу ошибку - это циклическая зависимость. А импорт чего-то из ./index - это как доказательство. - person Yozi; 06.07.2019