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

Question

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

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

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

До

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

После

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

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

Answer 1

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

{
  "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"
  ]
}

Answer 2

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

Answer 3

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

Answer 4

Я думаю, что правильный способ сделать это - отрегулировать 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.

Answer 5

Просто обновите версию angular, указав команду ниже. Ошибки исчезнут.

ng update @angular/core @angular/cli --next

После этого измените цель и модуль в файле tsconfig.json.

      "target": "esnext",
"module": "esnext",

Answer 6

Я решил эту проблему, только добавив "include": ["src/**/*. Ts"] в мой файл tsconfig.app.json.

Answer 7

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

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

Answer 8

Моя угловая версия - 8.2, и я исправил ее, просто изменив "module": "es2015" на "module": "es2020".

Answer 9

Если вы используете Ionic framework и VSCode, вам необходимо обновить версию IDE Typescript (> 4)!

Answer 10

У меня была эта проблема с angular 13, я заметил, что у некоторых сервисов была эта проблема, а у других - нет, разница была

      @import { Injectable } from '@angular/core/';

в то время как это отлично скомпилировано без проблем на angular 9, но исправление состояло в том, чтобы удалить / в конце, чтобы стать '

      @import { Injectable } from '@angular/core';