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

Когда я обновил 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.

Вы используете динамический импорт, поэтому вам нужно изменить свой 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"
  ]
}

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

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

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

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

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