Angular 8 - Modules à chargement paresseux : Erreur TS1323 : L'importation dynamique n'est prise en charge que si le paramètre '--module' est 'commonjs' ou 'esNext'.

Question

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

J'ai essayé les options qui figurent dans le guide de mise à niveau d'Angular.

J'ai apporté les modifications suivantes :

Avant

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

Après

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

error TS1323 : Dynamic import is only supported when '--module' flag is commonjs' ou 'esNext'.

Answer 1

Vous utilisez l'importation dynamique, vous devez donc modifier votre tsconfig.json comme suit pour cibler votre code vers esnext module

{
  "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 ne contient pas de module et de configuration cible, comme ceci

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

Answer 2

Je veux juste ajouter mon expérience à la réponse de @Tony. Après avoir changé tsconfig.json il a toujours montré une erreur (soulignée en rouge). Seulement après avoir rouvert l'éditeur (j'ai utilisé VSCode), j'ai vu le soulignement rouge disparaître.

Answer 3

En complément de la réponse de @Tony, il se peut que vous deviez faire la même chose (changer "module" : "esnext") dans le tsconfig.app.json. Dans mon cas, le tsconfig.json utilisait déjà esnext comme module mais le tsconfig.app.json utilisait toujours es2015 et cela a causé cette erreur.

Answer 4

Je pense que la bonne façon de faire 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 l'angulaire espace de travail . Le site tsconfig.app.json existe de sorte que si vous construisez un espace de travail Angular qui a multiple 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ù l'utilisation de l'attribut extends propriété).

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

Answer 5

J'ai résolu ce problème uniquement en ajoutant "include" : ["src/**/*.ts"] dans mon fichier tsconfig.app.json.