Angular 8 – Lazy Loading Modules: Fehler TS1323: Dynamischer Import wird nur unterstützt, wenn „–module“-Flag „commonjs“ oder „esNext“ ist

Lesezeit: 4 Minuten

Benutzer-Avatar
RajuPedda

Als ich Angular von 7 auf Angular 8 aktualisierte, erhielt ich einen Fehler für verzögertes Laden von Modulen

Ich habe die Optionen ausprobiert, die in der Winkel-Upgrade-Anleitung enthalten sind

Folgende Änderungen vorgenommen:

Vor

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

Nach

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

Fehler TS1323: Dynamischer Import wird nur unterstützt, wenn das Flag „–module“ „commonjs“ oder „esNext“ ist.

Benutzer-Avatar
Toni Ngo

Sie verwenden den dynamischen Import, also müssen Sie Ihre tsconfig.json wie folgt ändern, um Ihren Code darauf abzuzielen esnext Modul

{
  "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 kein solches Modul und keine Zielkonfiguration hat

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

  • ng new verwendet dies standardmäßig nicht. Gibt es einen Grund?

    – Post-Impatica

    30. Mai 2019 um 13:08 Uhr

  • Es scheint in Edge, Chrome, Firefox und IE11 zu funktionieren, wenn ich den IE11-Abschnitt in Polyfills auskommentiere, also bin ich glücklich.

    – Post-Impatica

    30. Mai 2019 um 13:24 Uhr

  • Ich musste die entfernen "module": "es2015" Linie von meiner tsconfig.app.json Datei

    – Ranbuch

    18. Juni 2019 um 8:42 Uhr

  • @ranbuch, ich hatte das gleiche Problem, habe aber die Zeile nicht entfernt, sondern nur geändert "module": "esnext" auch.

    – Alfa Bravo

    5. Juli 2019 um 9:54 Uhr

  • für mich war es tsconfig-aot.json. Ich habe es auf geändert esnext aus es2015

    – Ashok MA

    31. Mai 2020 um 14:25 Uhr

Benutzer-Avatar
Bi Wu

Ich möchte nur meine Erfahrung zu @Tonys Antwort hinzufügen. Nach dem Wechsel tsconfig.json es zeigte immer noch einen Fehler (rote Unterstreichung). Erst nach erneutem Öffnen des Editors (Ich habe VSCode verwendet) habe ich gesehen, dass die rote Unterstreichung verschwunden ist.

  • Ich habe keine tsconfig.app.json-Datei. Soll ich einen erstellen?

    – Markieren

    3. Februar 2020 um 19:47 Uhr

  • Ja, bitte beziehen Sie sich darauf. stackoverflow.com/questions/36916989/…

    – Bi Wu

    4. Februar 2020 um 20:58 Uhr

  • Bei IDEA Intelij hatte ich das gleiche Problem. Sie müssen das Projekt erneut öffnen.

    – NieMaszNic

    16. März 2020 um 5:05 Uhr

  • Ja. Du hast meinen Tag gerettet.

    – Shailesh Pratapwar

    20. August 2020 um 5:46 Uhr

  • Vielen Dank. Ich hatte das auch.

    – Julia W.

    11. August 2021 um 18:21 Uhr

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

  • Wir können das Hinzufügen von „module“ vermeiden: „esnext“ in den beiden Dateien, wir können es in tsconfig.json einfügen, aber nicht in tsconfig.app.json, da dies bereits tsconfig.json erweitert.

    – RajuPedda

    31. Mai 2019 um 7:07 Uhr

Ich denke, der richtige Weg, dies zu tun, ist, sich anzupassen tsconfig.app.json statt 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 ist die spezifische Typescript-Konfigurationsdatei für die App das sitzt unter der Wurzel des Angular Arbeitsplatz. Das tsconfig.app.json existiert also, wenn Sie einen Angular-Arbeitsbereich bauen, der hat mehrere Apps darin können Sie die Typescript-Konfiguration für jede App separat anpassen, ohne redundante Konfigurationseigenschaften schreiben zu müssen, die sich zwischen den Apps überschneiden (daher die extends Eigentum).

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

Benutzer-Avatar
pijusch gautam

Ich habe dieses Problem nur gelöst, indem ich “include” hinzugefügt habe: [“src/**/*.ts”]
in meiner tsconfig.app.json-Datei.

Benutzer-Avatar
Abhinav Kumar

Aktualisieren Sie einfach die eckige Version, indem Sie den folgenden Befehl eingeben. Die Fehler werden verschwinden.

ng update @angular/core @angular/cli --next

Ändern Sie danach das Ziel und das Modul in der Datei tsconfig.json

"target": "esnext",
"module": "esnext",

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

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

1283940cookie-checkAngular 8 – Lazy Loading Modules: Fehler TS1323: Dynamischer Import wird nur unterstützt, wenn „–module“-Flag „commonjs“ oder „esNext“ ist

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy