Angular 8 - ленивая загрузка модулей: ошибка TS1323: динамический импорт поддерживается только тогда, когда флаг '--module' равен 'commonjs' или 'esNext'

108

Когда я обновил Angular с 7 до Angular 8, я получил ошибку при ленивой загрузке модулей.

Я пробовал варианты, которые есть в руководстве по обновлению angular

Внесены следующие изменения:

Перед

    loadChildren: '../feature/path/sample- 
                         tage.module#SameTagModule'

После

   loadChildren: () => import('../feature/path/sample- 
                      tags.module').then(m => m.CreateLinksModule)

ошибка TS1323: динамический импорт поддерживается, только если флаг --module - commonjs или esNext.

RajuPedda
источник

Ответы:

210

Вы используете динамический импорт, поэтому вам нужно изменить свой tsconfig.json таким образом, чтобы нацелить свой код на esnextмодуль

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext", // add this line
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

Также убедитесь, что tsconfig.app.json не имеет модуля и целевой конфигурации примерно так

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "src/test.ts",
    "src/**/*.spec.ts"
  ]
}
Тони Нго
источник
4
ng newне использует это по умолчанию. Есть причина?
Сообщение Impatica
2
Кажется, он работает в Edge, Chrome, Firefox и IE11, когда я раскомментирую раздел IE11 в полифилах, поэтому я счастлив.
Сообщение Impatica
12
Мне пришлось удалить "module": "es2015"строку из моего tsconfig.app.jsonфайла
ranbuch
5
@ranbuch, у меня была такая же проблема, но строчку не удалил, просто поменял на "module": "esnext"тоже.
Alfa Bravo
все еще сталкивается с той же проблемой после обновления файла tsconfig.json
Aggarwal
26

Просто добавив к @Tony anwser, вам также может потребоваться сделать то же самое (изменить на "module": "esnext") в tsconfig.app.json. В моем случае tsconfig.json уже использовал esnext в качестве модуля, но tsconfig.app.json все еще использовал es2015, что и вызвало эту ошибку.

Низ
источник
3
Мы можем избежать добавления "module": "esnext" в оба файла, мы можем поместить его в tsconfig.json, но не в tsconfig.app.json, так как это уже расширяет tsconfig.json.
RajuPedda
18

Просто хочу добавить свой опыт к ответу @Tony. После изменения tsconfig.jsonвсе еще показывал ошибку (красное подчеркивание). Только после повторного открытия редактора (я использовал VSCode) я увидел, что красная линия подчеркивания исчезла.

Тай ЦзиньЮань
источник
У меня нет файла tsconfig.app.json. Стоит ли создать его?
Марк
Да, пожалуйста, обратитесь к этому. stackoverflow.com/questions/36916989/…
Тай ЦзиньЮань
Было очень полезно. Спасибо :)
Правин Кумар Палай
1
В IDEA Intelij у меня была такая же проблема. Вам необходимо повторно открыть проект.
NieMaszNic
Да. Ты спас мне день.
Шайлеш Пратапвар
12

Я думаю, что правильный способ сделать это - это отрегулировать, tsconfig.app.jsonа не tsconfig.json.

tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "esnext",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

tsconfig.app.json- это файл конфигурации Typescript, относящийся к приложению, которое находится под корнем рабочего пространства Angular . Он tsconfig.app.jsonсуществует таким образом, что если вы создаете рабочее пространство Angular, в котором есть несколько приложений, вы можете настроить конфигурацию Typescript отдельно для каждого приложения без необходимости писать избыточные свойства конфигурации, которые перекрываются между приложениями (отсюда и extendsсвойство).

Технически в этом нет необходимости tsconfig.app.json. Если вы удалите его, вам нужно будет поместить "module": "esnext"в tsconfig.json. Если вы оставите его там, он будет иметь приоритет tsconfig.json, поэтому вам нужно только добавить "module":"esnext"строку tsconfig.app.json.

Зак Голлвитцер
источник
Да, мне пришлось добавить модуль: esnext как в tsconfig.json, так и в tsconfig.app.json
RDV
0

Я устраняю эту ошибку, выполнив следующие шаги шаг 1: от «module»: «es2015» до «module»: «AMD» в tsconfig.json

Шаг 2: создайте новый файл tsconfig.app.json в корневом каталоге приложения, скопируйте код Тони Нго и вставьте его, тогда эта проблема будет решена.

Рашид Бухари
источник