Angular 8 - Lazy Loading Module: Fehler TS1323: Der dynamische Import wird nur unterstützt, wenn das Flag '--module' 'commonjs' oder 'esNext' ist.

Wenn ich Angular von 7 auf Angular 8 aktualisiert habe, wird ein Fehler beim verzögerten Laden von Modulen angezeigt

Ich habe die Optionen ausprobiert, die in der Anleitung zur Winkelaktualisierung enthalten sind

Folgende Änderungen vorgenommen:

Vor

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

Nach dem

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

Fehler TS1323: Der dynamische Import wird nur unterstützt, wenn das Flag '--module' 'commonjs' oder 'esNext' ist.

Sie verwenden den dynamischen Import, daher müssen Sie Ihre Datei tsconfig.json folgendermaßen ändern, um Ihren Code auf das esnextModul auszurichten

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

Stellen Sie außerdem sicher, dass tsconfig.app.json keine Modul- und Zielkonfiguration wie diese enthält

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

Wenn Sie nur @ Tonys Antwort hinzufügen, müssen Sie möglicherweise dasselbe in der Datei tsconfig.app.json tun (ändern Sie zu "module": "esnext"). In meinem Fall verwendete tsconfig.json bereits esnext als Modul, aber tsconfig.app.json verwendete immer noch es2015, was diesen Fehler verursachte.

Ich möchte nur meine Erfahrung zu @ Tonys Antwort hinzufügen. Nach dem Ändern tsconfig.jsonzeigte es immer noch einen Fehler (rote Unterstreichung). Erst nach dem erneuten Öffnen des Editors (ich habe VSCode verwendet) wurde die rote Unterstreichung ausgeblendet.

Ich denke, der richtige Weg, dies zu tun, besteht darin, sich anzupassen tsconfig.app.jsonund nicht tsconfig.json.

tsconfig.app.json

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

tsconfig.app.jsonist die für die App spezifische Typescript-Konfigurationsdatei, die sich unter dem Stammverzeichnis des Angular- Arbeitsbereichs befindet . Das ist tsconfig.app.jsonvorhanden, sodass Sie beim Erstellen eines Angular-Arbeitsbereichs mit mehreren Apps die Typescript-Konfiguration für jede App separat anpassen können, ohne redundante Konfigurationseigenschaften schreiben zu müssen, die sich zwischen den Apps überschneiden (daher die extendsEigenschaft).

Technisch brauchen Sie überhaupt nicht tsconfig.app.json. Wenn Sie es löschen, müssen Sie das "module": "esnext"in platzieren tsconfig.json. Wenn Sie es dort belassen, hat es Vorrang tsconfig.json, sodass Sie nur die "module":"esnext"Zeile hinzufügen müssen tsconfig.app.json.

Ich behebe diesen Fehler, indem ich die folgenden Schritte ausführe: Schritt 1: "Modul": "es2015" bis "Modul": "AMD" in tsconfig.json

Schritt 2: Erstellen Sie eine neue Datei tsconfig.app.json im App-Stammverzeichnis, kopieren Sie den Code von Tony Ngo und fügen Sie ihn ein. Dann wird dieses Problem behoben.