Ich habe die folgende TypeScript-Klasse

export class Vehicule extends TrackableEntity {
  vehiculeId: number;
  constructor() {
    super();
    return super.proxify(this);
  }
}

Mein TypeScript-Ziel in tsconfig.json ist als es6 konfiguriert:

"compilerOptions": {
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es6",
}

Zur Laufzeit, hier in Chrome, schlägt der Code fehl mit:

ReferenceError: Cannot access 'Vehicule' before initialization
    at Module.Vehicule (https://localhost:44338/src-app-components-dispositifsDATI-dispositifsDATI-module.js:10559:100)
    at Module../src/app/domain/models/VehiculeGpsBoxInfo.ts (https://localhost:44338/src-app-components-dispositifsDATI-dispositifsDATI-module.js:11156:69)
    at __webpack_require__ (https://localhost:44338/runtime.js:84:30)
    at Module../src/app/domain/models/Vehicule.ts (https://localhost:44338/src-app-components-dispositifsDATI-dispositifsDATI-module.js:10571:78)
    at __webpack_require__ (https://localhost:44338/runtime.js:84:30)
    at Module../src/app/components/dispositifsDATI/mainDATI/listDATI/listDATI.component.ts (https://localhost:44338/src-app-components-dispositifsDATI-dispositifsDATI-module.js:6447:82)
    at __webpack_require__ (https://localhost:44338/runtime.js:84:30)
    at Module../src/app/components/dispositifsDATI/index.ts (https://localhost:44338/src-app-components-dispositifsDATI-dispositifsDATI-module.js:3053:95)
    at __webpack_require__ (https://localhost:44338/runtime.js:84:30)
    at Module../src/app/components/dispositifsDATI/dispositifsDATI.routes.ts (https://localhost:44338/src-app-components-dispositifsDATI-dispositifsDATI-module.js:2982:64)

Ich musste es5 in es6 ändern, um dieses andere Problem zu lösen.

BEARBEITEN: Die Datei VehiculeGpsBoxInfo.ts importiert Fahrzeuge wie folgt:

import { Vehicule } from "./Vehicule";

EDIT 2: Ich würde sagen, dass dies möglicherweise mit dem Webpack zusammenhängt, der Art und Weise, wie Module in den generierten Modulen exportiert/importiert werden.

EDIT 3: Nach weiteren Recherchen scheint dies nichts mit dem oben gezeigten Code zu tun zu haben. Habe eine neue Frage zu Webpack und ES6 gestartet.

Ich habe diesen Fehler aufgrund einer zirkulären Abhängigkeit erhalten

• A mit B injiziert
• B mit C injiziert
• C mit A injiziert

Durch das Entfernen der zirkulären Abhängigkeit wurde dieser Fehler behoben.

Sie stoßen wahrscheinlich auf dieses Angular-Problem: https://github.com/angular/angular-cli/issues/15077.

Aus dieser Ausgabe:

Hallo, gibt es einen Grund, warum emitDecoratorMetadata wahr sein muss?

Diese TypeScript-Option weist eine grundlegende Designbeschränkung bei ES2015+-Code auf und sollte bei der Ausrichtung auf eine solche Ausgabe am besten vermieden werden. Daher handelt es sich hier um ein Problem mit TypeScript selbst und nicht mit Angular.

Angular 8+ erfordert diese Option nicht mehr. Bisher war es auch nur für den JIT-Modus erforderlich, der normalerweise nur in der Entwicklung verwendet wird.

Die Lösung ist zu setzen "emitDecoratorMetadata": false in Ihrer tsconfig.json-Datei.

Randnotiz:
Ich muss sagen, dass frühere Versionen der Angular-CLI automatisch hinzugefügt wurden emitDecoratorMetadata: trueund es gibt keinen Grund, warum ein Entwickler das wissen sollte emitDecoratorMetadata sollte jetzt sein falseEs ist ziemlich schrecklich, dass das Angular-Team im Grunde gesagt hat: „Das ist nicht unser Problem“ und das Problem ohne Maßnahmen abgeschlossen hat. Dies hätte durch Hinzufügen einer besseren Dokumentation leicht „behoben“ werden können (wie von jemandem in der verlinkten Ausgabe hervorgehoben).

Beachten Sie, dass dieser Fehler auch durch die Definition von zwei öffentlichen verursacht werden kann @Injectable Klassen innerhalb derselben .ts Datei.

Ich bin mehr als einmal darüber gestolpert, als ich nur lokal Prototypen erstellte (insbesondere, wenn ich einen Dienst in mehrere umgestaltete).

Einstellung emitDecoratorMetadata: false behebt auch diese Situation; Aber für den Fall, dass Sie es eilig haben, etwas zu reparieren, oder keine Lust haben, damit herumzuspielentsconfig.json Datei in einem großen Projekt – es ist nützlich zu wissen, dass Sie das Problem möglicherweise beheben können, indem Sie einfach eine der Klassen in eine neue Datei verschieben.

um zirkuläre Abhängigkeiten zu finden:

npx madge –circular –extensions ts ./

(vorher bauen)

Ich bin aufgrund der Reihenfolge meiner Importanweisungen im Modul darauf gestoßen. Vor der Komponente musste eine Datei importiert werden, die auch auf die Komponente zugreift.

In Angular 8, mit entryComponents als leere Liste in einem SharedModule deklariert, verursachte bei mir dieses Problem:

entryComponents: []

Nach dem Entfernen entryComponentsalles hat gut funktioniert.

Zirkuläre Abhängigkeit ist der Teufel!

Dies führt dazu, dass die gesamte Abhängigkeitsschleife vom Compiler nicht aufgelöst werden kann. In den meisten Fällen sehen die Fehler so aus, als würden Sie die Klassen überhaupt nicht importieren.

Manche denken vielleicht, dass zirkuläre Abhängigkeiten nur in Diensten und Modulen verhindert werden sollten. Zirkuläre Abhängigkeiten sollten jedoch in allen Formen verhindert werden, sogar in Modellen, Komponenten und Klassen.

Wenn Sie eine zirkuläre Abhängigkeit haben, ist das ein Zeichen dafür, dass Sie (früher oder später) Ihren Code umgestalten und neu strukturieren müssen. Die folgenden Hinweise können dabei hilfreich sein. Angenommen, wir möchten die zirkuläre Abhängigkeit zwischen zwei Klassen A, B beseitigen.

Lösung 1: Vereinigung/Zusammenführung

A und B folgen demselben Konzept und können zu einer einzigen Klasse zusammengeführt werden.

Lösung 2: Trennung/Erschaffung

Es sollte eine neue Klasse C geben, auf die sich sowohl A als auch B verlassen oder die irgendwo zwischen diesen beiden liegt.

Meiner Erfahrung nach entsteht die zirkuläre Abhängigkeit in den meisten Fällen, weil der Entwickler dazu neigt, n Logiken in k (k