web-dev-qa-db-fra.com

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, erreur lors du chargement des modules paresseux)

J'ai essayé les options, qui sont là dans le guide de mise à niveau angular

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

javascriptangulartypescriptmoduleangular8
91
RajuPedda

Vous utilisez l'importation dynamique, vous devez donc modifier votre tsconfig.json comme ceci pour cibler votre code sur le module 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"
    ]
  }
}

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"
  ]
}
151
Tony Ngo

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

18
Niz

Je pense que la bonne façon de procéder est d'ajuster tsconfig.app.json plutôt que 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 est le fichier de configuration TypeScript spécifique à l'application qui se trouve sous la racine de Angular espace de travail . Le tsconfig.app.json existe de sorte que si vous créez un Angular espace de travail contenant plusieurs applications, vous pouvez ajuster le 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 propriété extends).

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

5
Zach Gollwitzer

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

5
Tai JinYuan