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'

107

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».

RajuPedda
la source

Réponses:

206

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"
  ]
}
Tony Ngo
la source
4
ng newne l'utilise pas par défaut. Y a-t-il une raison?
Helzgate
2
Cela semble fonctionner dans Edge, Chrome, Firefox et IE11 lorsque je décommente la section IE11 dans polyfills, donc je suis content.
Helzgate
12
J'ai dû supprimer la "module": "es2015"ligne de mon tsconfig.app.jsonfichier
ranbuch
5
@ranbuch, j'ai eu le même problème mais je n'ai pas supprimé la ligne, je l'ai juste changée en "module": "esnext"aussi.
Alfa Bravo
toujours confronté au même problème après la mise à jour du fichier tsconfig.json
Gaurav Aggarwal
25

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.

Niz
la source
3
On peut éviter d'ajouter "module": "esnext" dans les deux fichiers, on peut le mettre dans tsconfig.json mais pas dans tsconfig.app.json, car cela étend déjà le tsconfig.json.
RajuPedda
16

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.

Tai JinYuan
la source
Je n'ai pas de fichier tsconfig.app.json. Dois-je en créer un?
Mark le
Oui, veuillez vous référer à ceci. stackoverflow.com/questions/36916989/…
Tai JinYuan
A été très utile. Merci :)
Praveen Kumar Palai
1
Dans IDEA Intelij, j'ai eu le même problème. Vous devez rouvrir le projet.
NieMaszNic
Ouais. Tu as sauvé ma journée.
Shailesh Pratapwar
12

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.

Zach Gollwitzer
la source
Oui, j'ai dû ajouter le module: 'esnext' dans tsconfig.json et tsconfig.app.json
RDV
0

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.

Rashid Bukhari
la source