Angular 8 - Modules de chargement différé: Erreur TS1323: l'importation dynamique n'est prise en charge que lorsque l'indicateur '--module' est 'commonjs' ou 'esNext'

Lorsque j'ai mis à jour Angular de 7 à Angular 8, obtention d'une erreur pour les modules de chargement paresseux

J'ai essayé les options qui se trouvent dans le guide de mise à niveau angulaire

Apportez les modifications ci-dessous:

Avant

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

Après

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

erreur TS1323: l'importation dynamique n'est prise en charge que lorsque l'indicateur «--module» est «commonjs» ou «esNext».

Vous utilisez l'importation dynamique, vous devez donc modifier votre tsconfig.json comme ceci pour cibler votre code sur le esnextmodule

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

Assurez-vous également de vérifier que tsconfig.app.json n'a pas de module et de configuration cible quelque chose comme ça

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

En ajoutant simplement à la réponse de @ Tony, vous devrez peut-être faire de même (changer en "module": "esnext") dans le tsconfig.app.json. Dans mon cas, tsconfig.json utilisait déjà esnext comme module mais tsconfig.app.json utilisait toujours es2015 et cela a causé cette erreur.

Je veux juste ajouter mon expérience à la réponse de @ Tony. Après avoir changé, tsconfig.jsonil affichait toujours une erreur (soulignement rouge). Ce n'est qu'après la réouverture de l'éditeur (j'ai utilisé VSCode) que j'ai vu le soulignement rouge disparaître.

Je pense que la bonne façon de faire est de s'ajuster tsconfig.app.jsonplutôt que de tsconfig.json.

tsconfig.app.json

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

tsconfig.app.jsonest le fichier de configuration Typescript spécifique à l' application qui se trouve sous la racine de l' espace de travail Angular . Il tsconfig.app.jsonexiste de sorte que si vous créez un espace de travail angulaire contenant plusieurs applications, vous pouvez ajuster la configuration Typescript séparément pour chaque application sans avoir à écrire des propriétés de configuration redondantes qui se chevauchent entre les applications (d'où la extendspropriété).

Techniquement, vous n'en avez pas du tout besoin tsconfig.app.json. Si vous le supprimez, vous devrez placer le fichier "module": "esnext"in tsconfig.json. Si vous le gardez là, il aura priorité sur tsconfig.json, il vous suffit donc d'ajouter la "module":"esnext"ligne tsconfig.app.json.

Je résous cette erreur en faisant les étapes suivantes étape 1: "module": "es2015" à "module": "AMD" dans tsconfig.json

étape 2: créez un nouveau fichier tsconfig.app.json dans le répertoire racine de l'application, copiez le code de Tony Ngo et collez-le, puis ce problème sera résolu.