Warnung vor experimentellen Dekorateuren bei der TypeScript-Kompilierung

Ich erhalte die Warnung ...

Die experimentelle Unterstützung für Dekorateure ist eine Funktion, die sich in einer zukünftigen Version ändern kann. Setzen Sie die Option 'experimentalDecorators', um diese Warnung zu entfernen.

... obwohl meine compilerOptions in tsconfig.json die folgenden Einstellungen haben:

"emitDecoratorMetadata": true,
"experimentalDecorators": true,

Was seltsam ist, ist, dass einige zufällige Klassen, die Dekorateure verwenden, diese Warnung nicht anzeigen, der Rest im selben Projekt jedoch.

Was könnte ein solches Verhalten im TypeScript-Compiler verursachen?

Obwohl VS Code ein großartiger Editor für TypeScript-Projekte ist, muss er von Zeit zu Zeit überprüft werden. Oft führen bestimmte Dateien ohne Vorwarnung dazu, dass sie ausflippen und sich beschweren. Meistens scheint das Update darin zu bestehen, alle geöffneten Dateien zu speichern und zu schließen und dann zu öffnen tsconfig.json. Danach sollten Sie in der Lage sein, die fehlerhafte Datei ohne Fehler erneut zu öffnen. Wenn es nicht funktioniert, schäumen, spülen und wiederholen.

Wenn Sie tsconfig.jsondie Quelldateien mithilfe des filesArrays angeben , funktioniert IntelliSense nur dann ordnungsgemäß, wenn auf die betreffende Datei verwiesen wird, sodass VS Code sie durch Durchlaufen des Eingabedateibaums finden kann.

Bearbeiten: Der Befehl 'Fenster neu laden' (vor langer Zeit hinzugefügt) sollte dieses Problem ein für alle Mal lösen.

Ich muss Folgendes in die Datei settings.json von vscode einfügen, um die Warnung zu entfernen.

"javascript.implicitProjectConfig.experimentalDecorators": true

VSCode -> Einstellungen -> Einstellungen

Dieser Fehler tritt auch auf, wenn Sie den Ordner "src" für Ihren Arbeitsbereichsordner auswählen.

Wenn der Stammordner ausgewählt wird, in dem sich "src", "node_modules" befinden, verschwindet der Fehler

Datei -> Einstellungen -> Einstellungen

Erstellen Sie in Ihrem Projekt die Datei tsconfig.json und fügen Sie diese Zeilen hinzu

{
    "compilerOptions": {
        "experimentalDecorators": true,
        "allowJs": true
    }
}

muss typescript.tsdkzu meinem hinzufügen .vscode/settings.json:

"typescript.tsdk": "node_modules/typescript/lib"

Gehen Sie in VSCode zu Datei => Einstellungen => Einstellungen (oder Strg + Komma) und die Datei mit den Benutzereinstellungen wird geöffnet. Suchen Sie nach "javascript.implicitProjectConfig.experimentalDecorators": true und aktivieren Sie das Kontrollkästchen für experimentelleDecorators für die Datei. Es sollte das Problem beheben. Es hat für mich getan.

Gehen Sie in Visual Code Studio zu Datei >> Einstellungen >> Einstellungen, suchen Sie im Suchfeld nach "Dekorator" und aktivieren Sie die Option wie im Bild.

Öffnen Sie die settings.jsonDatei am folgenden Speicherort<project_folder>/.vscode/settings.json

oder Sie können die Datei wie unten beschrieben über das Menü öffnen

VSCode -> File -> Preferences -> Workspace Settings

Fügen Sie dann die folgenden Zeilen in die settings.jsonDatei ein

{
    "typescript.tsdk": "node_modules/typescript/lib",
    "enable_typescript_language_service": false
}

Das ist alles. Sie sehen keine Warnung / Fehler in Bezug auf ' experimentelleDecorators '

Diese Antwort richtet sich an Personen, die ein Javascript- Projekt und kein Typescript- Projekt verwenden . Anstelle einer tsconfig.json- Datei können Sie auch eine jsconfig.json verwenden Datei verwenden.

In dem speziellen Fall, dass die Dekorateure Sie warnen, dass Sie in die Datei schreiben möchten:

{
    "compilerOptions": {
        "experimentalDecorators": true
    }
}

Für das fragliche Buggy-Verhalten ist es immer besser, das "Include" in der Konfigurationsdatei anzugeben und den Editor neu zu starten. Z.B

{
    "compilerOptions": {
        "target": "ES6",
        "experimentalDecorators": true
    },
    "include": [
        "app/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

"javascript.implicitProjectConfig.experimentalDecorators": true

Wird dieses Problem lösen.

Fügen Sie die folgenden Zeilen in tsconfig.json hinzu und starten Sie VS Code neu.

{
    "compilerOptions": {
        "experimentalDecorators": true,
        "target": "es5",
        "allowJs": true
    }
}

Um den Punkt nicht näher zu erläutern, sollten Sie jedoch Folgendes hinzufügen

• Arbeitsbereichseinstellungen nicht Benutzereinstellungen

unter Datei >> Einstellungen >> Einstellungen

"javascript.implicitProjectConfig.experimentalDecorators": true

Dies hat das Problem für mich behoben und ich habe einige Vorschläge ausprobiert, die ich hier und an anderen Orten gefunden habe.

Ich hatte dieses Problem kürzlich unter Visual Studio 2017 - es stellte sich heraus, dass es durch eine "Funktion" von VS verursacht wurde - tsconfig.json wurde ignoriert, wenn die Build-Aktion nicht auf "Inhalt" gesetzt ist .

Das Ändern der Build-Aktion in "Content" und das erneute Laden der Lösung lösten das Problem.

Aus Gründen der Klarheit und Dummheit.

1) Öffnen Sie .vscode / settings.json.

2) Fügen Sie "typescript.tsdk": "node_modules / typescript / lib" hinzu.

3) Speichern Sie es.

4) Starten Sie Visual Studio Code neu.

Wenn Sie in Visual Studio arbeiten. Sie können dieses Update versuchen

1. Entladen Sie Ihr Projekt aus Visual Studio
2. Gehen Sie zu Ihrem Projekt-Ausgangsverzeichnis und öffnen Sie die Datei "csproj".

3. Fügen Sie diesem Abschnitt TypeScriptExperimentalDecorators hinzu, wie in der Abbildung gezeigt

   

   4. Laden Sie das Projekt in Visual Studio neu.

Weitere Details finden Sie an dieser Stelle.

Wenn Sie cli zum Kompilieren von * .ts-Dateien verwenden, können Sie experimentDecorators mit dem folgenden Befehl festlegen:

 tsc filename.ts --experimentalDecorators "true"

Bitte überprüfen Sie, ob Sie in Ihrem VS-Code den Ordner des gesamten Projekts und nicht nur den src-Ordner gefunden haben. Wenn Sie nur den src öffnen, befindet sich die Datei ts.config.json (im Projektordner) nicht im Gültigkeitsbereich und VS erkennt die experimentellen Dekorationsparameter nicht.

In meinem Fall wurden alle Probleme im Zusammenhang mit diesem Problem behoben.

1. Öffnen Sie den VScode.
2. Drücken Sie Strg + Komma
3. Folgen Sie den Anweisungen im Screenshot
   1. Suche nach experimentellen Dekoren
   2. Bearbeite es

Öffnen Sie den gesamten Projektordner anstelle des Projektnamens / src

tsconfig.json befindet sich außerhalb des src-Ordners

Ich habe die Warnung korrigiert, indem ich "baseUrl": "" aus der Datei tsconfig.json entfernt habe

Dieses Problem kann auftreten, wenn Sie eine TS-Datei öffnen, die außerhalb des Projekts vorhanden ist. Zum Beispiel benutze ich lerna und hatte eine Datei aus einem anderen Paket geöffnet. Obwohl dieses andere Paket eine eigene tsconfig mit experimentellen Dekorateuren hatte, wird es von VsCode nicht berücksichtigt.

Beim Erstellen eines Injectable Services in Angular 2 trat das gleiche Problem auf . Ich habe alle Dinge in tsconfig.json installiert. Trotzdem wurde dieser Fehler in der Zeile ColorsImmutable angezeigt.

@Injectable()
export class ColorsImmutable {

Die Lösung bestand darin, den Dienst auf Modulebene oder Komponentenebene mithilfe des Provider-Arrays zu registrieren.

providers:[ColorsImmutable ],

Wenn Sie die Laufzeit von Deno JavaScript und TypeScript verwenden und experimentelle Dekoratoren aktivieren: true in tsconfig.json oder den VSCode ide-Einstellungen. Es wird nicht funktionieren. Je nach Deno-Anforderung müssen Sie tsconfig als Flag angeben, wenn Sie eine Deno-Datei ausführen. Siehe Benutzerdefinierte TypeScript-Compileroptionen

In meinem speziellen Fall habe ich einen Deno-Test durchgeführt und verwendet.

$ deno test -c tsconfig.json

Wenn es sich um eine Datei handelt, haben Sie so etwas wie

 $ deno run -c tsconfig.json mod.ts

meine tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "module": "esnext"
  }
}

Ich habe diese Option zu tsconfig.json hinzugefügt. "baseUrl": "front-end"Ersetzen Sie das Front-End durch den Namen Ihres Angular-Cli -Projekts.

Sie können es auch mit versuchen ng build. Ich habe gerade die App neu erstellt und jetzt entspricht sie nicht mehr.

Es stellt sich also heraus, dass Sie dies umgehen können, indem Sie Ihren Modulnamen mit dem Dateinamen abgleichen. Wenn Sie den Modulnamen BankSpecialtyModule haben, sollte der Dateiname lauten. bank-speciality.module.ts

Dieser Fehler trat auf, als ich ein neues Modul erstellte und meine Dateien * .module.ts und * -routing.module.ts in einen anderen Ordner verschob. Nachdem ich die beiden Dateien gelöscht und das Modul im neuen Ordner erstellt habe, funktioniert es einwandfrei. Umgebung Angular Version 9 und Angular CLI Version 9.1.0