Кутовий 8 - Ледачі модулі завантаження: Помилка TS1323: Динамічний імпорт підтримується лише тоді, коли прапор '--module' є 'commonjs' або 'esNext'

Коли я оновив 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'.

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

Просто додавши до привидника @ Тоні, вам може знадобитися зробити те ж саме (змінити на "module": "esnext") в tsconfig.app.json. У моєму випадку tsconfig.json вже використовував esnext як модуль, але tsconfig.app.json все ще використовував es2015, і це спричинило цю помилку.

Просто хочу додати свій досвід до відповіді @ Тоні. Після зміни 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Існує , так що якщо ви будуєте Кутове робочий простір , яке має кілька додатків в ньому, ви можете налаштувати конфігурацію машинопису окремо для кожної програми без необхідності писати зайві властивості конфігурації , які перекриваються між додатками (звідси і extendsвласністю).

Технічно вам це зовсім не потрібно tsconfig.app.json. Якщо ви видалите його, ви повинні помістити "module": "esnext"в систему tsconfig.json. Якщо ви будете тримати його там, він матиме перевагу над цим tsconfig.json, тому вам потрібно лише додати "module":"esnext"рядок tsconfig.app.json.

Я вирішую цю помилку, виконуючи наступні кроки крок 1: "module": "es2015" to "module": "AMD" в tsconfig.json

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