Angular 8 - Moduli di caricamento lento: errore TS1323: l'importazione dinamica è supportata solo quando il flag '--module' è 'commonjs' o 'esNext'

Quando ho aggiornato Angular da 7 a Angular 8, ho ricevuto un errore per i moduli di caricamento lento

Ho provato le opzioni, che sono presenti nella guida all'aggiornamento angolare

Apportate le seguenti modifiche:

Prima

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

Dopo

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

errore TS1323: l'importazione dinamica è supportata solo quando il flag "--module" è "commonjs" o "esNext".

Stai usando l'importazione dinamica, quindi devi cambiare il tuo tsconfig.json in questo modo per indirizzare il tuo codice al esnextmodulo

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

Assicurati anche di controllare che tsconfig.app.json non abbia il modulo e la configurazione di destinazione qualcosa del genere

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

Solo aggiungendo alla risposta di @ Tony, potresti anche dover fare lo stesso (cambiare in "module": "esnext") in tsconfig.app.json. Nel mio caso tsconfig.json stava già utilizzando esnext come modulo, ma tsconfig.app.json stava ancora utilizzando es2015 e questo ha causato questo errore.

Voglio solo aggiungere la mia esperienza alla risposta di @ Tony. Dopo la modifica tsconfig.jsonmostrava ancora un errore (linea rossa sottolineata). Solo dopo aver riaperto l'editor (ho usato VSCode) ho visto scomparire la sottolineatura rossa.

Penso che il modo corretto per farlo sia adeguarsi tsconfig.app.jsonpiuttosto che 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è il file di configurazione Typescript specifico per l' app che si trova sotto la radice dell'area di lavoro Angular . Il tsconfig.app.jsonesiste in modo che se si sta creando un'area di lavoro angolare che ha molteplici applicazioni in esso, è possibile regolare la configurazione tipografico separatamente per ogni applicazione senza dover scrivere proprietà di configurazione ridondanti che si sovrappongono tra le applicazioni (da qui la extendsproprietà).

Tecnicamente, non ne hai affatto bisogno tsconfig.app.json. Se lo elimini, dovrai inserire il file "module": "esnext"in tsconfig.json. Se lo tieni lì, avrà la precedenza tsconfig.json, quindi dovrai solo aggiungere la "module":"esnext"riga tsconfig.app.json.

risolvo questo errore eseguendo i seguenti passaggi passaggio 1: da "modulo": "es2015" a "modulo": "AMD" in tsconfig.json

passo 2: crea un nuovo file tsconfig.app.json nella directory principale dell'app, copia il codice di Tony Ngo e incollalo, quindi questo problema sarà risolto.