Avertissement des décorateurs expérimentaux dans la compilation TypeScript

Je reçois l'avertissement ...

La prise en charge expérimentale des décorateurs est une fonctionnalité susceptible d'être modifiée dans une future version. Définissez l'option 'experimentalDecorators' pour supprimer cet avertissement.

... même si mes options de compilation dans tsconfig.json ont les paramètres suivants:

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

Ce qui est bizarre, c'est que certaines classes aléatoires qui utilisent des décorateurs ne montrent pas cet avertissement, mais les autres du même projet le font.

Qu'est-ce qui pourrait provoquer un tel comportement dans le compilateur TypeScript?

Bien que VS Code soit un excellent éditeur pour les projets TypeScript, il a besoin d'un coup de pouce de temps en temps. Souvent, sans avertissement, certains fichiers le font paniquer et se plaindre. Généralement, le correctif semble être d'enregistrer et de fermer tous les fichiers ouverts, puis de les ouvrir tsconfig.json. Après cela, vous devriez pouvoir rouvrir le fichier incriminé sans erreur. Si cela ne fonctionne pas, faites mousser, rincez et répétez.

Si votre tsconfig.jsonspécifie ses fichiers source à l'aide du filestableau, IntelliSense ne fonctionnera correctement que si le fichier en question est référencé de sorte que VS Code puisse le trouver en parcourant l'arborescence des fichiers d'entrée.

Edit: La commande 'reload window' (ajoutée il y a longtemps maintenant) devrait résoudre ce problème une fois pour toutes.

Je dois ajouter ce qui suit dans le fichier settings.json de vscode pour supprimer l'avertissement.

"javascript.implicitProjectConfig.experimentalDecorators": true

VSCode -> Préférences -> Paramètres

Cette erreur se produit également lorsque vous choisissez le dossier "src" pour votre dossier d'espace de travail.

Lorsque le dossier racine, dossier où se trouvent les "src", "node_modules" est choisi, l'erreur disparaît

Fichier -> Préférences -> Paramètres

à l'intérieur de votre projet, créez le fichier tsconfig.json, puis ajoutez ces lignes

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

dois ajouter typescript.tsdkà mon .vscode/settings.json:

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

Dans VSCode, allez dans Fichier => Préférences => Paramètres (ou Contrôle + virgule) et il ouvrira le fichier Paramètres utilisateur. Recherchez "javascript.implicitProjectConfig.experimentalDecorators": true, puis cochez la case experimentalDecorators dans le fichier et il devrait le corriger. Ça l'a fait pour moi.

Dans Visual Code Studio, allez dans Fichier >> Préférences >> Paramètres, recherchez "décorateur" dans le champ de recherche et cochez l'option comme dans l'image.

Ouvrir le settings.jsonfichier à l'emplacement suivant<project_folder>/.vscode/settings.json

ou vous pouvez ouvrir le fichier à partir du menu comme mentionné ci-dessous

VSCode -> File -> Preferences -> Workspace Settings

Ajoutez ensuite les lignes suivantes dans le settings.jsonfichier

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

C'est tout. Vous ne verrez aucun avertissement / erreur concernant ' experimentalDecorators '

Cette réponse est destinée aux personnes qui utilisent un projet Javascript et non un projet Typescript . Au lieu d'un fichier tsconfig.json , vous pouvez utiliser un fichier jsconfig.json .

Dans le cas particulier où les décorateurs vous avertissent que vous voulez écrire à l'intérieur du fichier:

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

Pour les comportements de buggy demandés, il est toujours préférable de spécifier "include" dans le fichier de configuration et de redémarrer l'éditeur. Par exemple

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

"javascript.implicitProjectConfig.experimentalDecorators": true

Va résoudre ce problème.

Ajoutez les lignes suivantes dans tsconfig.json et redémarrez VS Code.

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

Ne pas insister sur le point, mais assurez-vous d'ajouter ce qui suit à

• Les paramètres de l'espace de travail et non les paramètres utilisateur

sous Fichier >> Préférences >> Paramètres

"javascript.implicitProjectConfig.experimentalDecorators": vrai

cela a résolu le problème pour moi, et j'ai essayé pas mal de suggestions que j'ai trouvées ici et ailleurs.

J'ai récemment rencontré ce problème sous Visual Studio 2017 - il s'est avéré qu'il était dû à une «fonctionnalité» de VS - ignorant tsconfig.json lorsque l'action de génération n'est pas définie sur Contenu .

La modification de l'action Générer en Contenu et le rechargement de la solution ont donc résolu le problème.

Par souci de clarté et de stupidité.

1) Ouvrez .vscode / settings.json.

2) Ajoutez "typescript.tsdk": "node_modules / typescript / lib" dessus.

3) Enregistrez-le.

4) Redémarrez Visual Studio Code.

Si vous travaillez dans Visual studio. Vous pouvez essayer ce correctif

1. Déchargez votre projet de Visual Studio
2. Accédez au répertoire de base de votre projet et ouvrez le fichier "csproj".

3. Ajoutez TypeScriptExperimentalDecorators à cette section comme indiqué dans l'image

   

   4. Rechargez le projet dans Visual studio.

voir plus de détails à cet endroit.

Si vous utilisez cli pour compiler des fichiers * .ts, vous pouvez définir experimentalDecorators à l'aide de la commande suivante:

 tsc filename.ts --experimentalDecorators "true"

Veuillez vérifier que vous avez ouvert dans votre code VS le dossier de l'ensemble du projet et pas seulement le dossier src, car si vous ouvrez uniquement le src, le fichier ts.config.json (situé dans le dossier du projet) ne sera pas dans la portée, et VS ne reconnaîtra pas les paramètres des décorateurs expérimentaux.

Dans mon cas, cela a résolu tous les problèmes liés à ce problème.

1. Ouvrez VScode.
2. Appuyez sur ctrl + virgule
3. Suivez les instructions de la capture d'écran
   1. Recherche de décorateurs expérimentaux
   2. Éditer

Ouvrir le dossier complet du projet au lieu du nom du projet / src

tsconfig.json est hors du dossier src

J'ai corrigé l'avertissement en supprimant "baseUrl": "", du fichier tsconfig.json

Vous pouvez rencontrer ce problème si vous ouvrez un fichier TS qui existe en dehors du projet. Par exemple, j'utilise lerna et un fichier a été ouvert à partir d'un autre package. Bien que cet autre paquet ait son propre tsconfig avec des décorateurs expérimentaux, VsCode ne l'honore pas.

J'ai rencontré le même problème lors de la création d'un service injectable dans Angular 2. J'ai toutes les choses en place dans tsconfig.json .J'obtenais toujours cette erreur sur la ligne ColorsImmutable.

@Injectable()
export class ColorsImmutable {

Et le correctif consistait à enregistrer le service au niveau du module ou au niveau des composants à l'aide du tableau des fournisseurs.

providers:[ColorsImmutable ],

Si vous utilisez l'environnement d'exécution Deno JavaScript et TypeScript et que vous activez experimentalDecorators: true dans tsconfig.json ou les paramètres idéaux VSCode. Ça ne marchera pas. Selon l'exigence de Deno, vous devez fournir tsconfig comme indicateur lors de l'exécution d'un fichier Deno. Voir Options du compilateur TypeScript personnalisé

Dans mon cas particulier, je faisais un test Deno et je l'utilisais.

$ deno test -c tsconfig.json

S'il s'agit d'un fichier, vous avez quelque chose comme

 $ deno run -c tsconfig.json mod.ts

mon tsconfig.json

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

J'ai ajouté cette option à tsconfig.json, "baseUrl": "front-end"Remplacez front-end par le nom de votre projet angular-cli.

Vous pouvez également essayer avec ng build. Je viens de reconstruire l'application et maintenant elle ne se conforme pas.

Il s'avère donc que vous pouvez contourner ce problème en faisant correspondre le nom de votre module au nom de fichier. Si vous avez le nom de module BankSpecialtyModule, le nom de fichier doit être. bank-speciality.module.ts

J'ai rencontré cette erreur lorsque j'ai créé un nouveau module et déplacé mon fichier * .module.ts et * -routing.module.ts vers un autre dossier. Après avoir supprimé les deux fichiers et créé le module sur le nouveau dossier, cela fonctionne parfaitement. Environnement Angular version 9 et Angular CLI version 9.1.0

Pour moi, cette erreur "La prise en charge expérimentale des décorateurs est une fonctionnalité susceptible d'être modifiée dans une future version. (Etc)" ne s'est produite que dans VS Code dans un projet Angular et uniquement lors de la création d'un nouveau service.

La solution ci-dessus: «Dans Visual Code Studio, accédez à Fichier >> Préférences >> Paramètres, recherchez« décorateur »dans le champ de recherche et cochez l'option JavaScript› Configuration de projet implicite: décorateurs expérimentaux »a résolu le problème.

De plus, l'arrêt du service ng dans la fenêtre du terminal et son redémarrage ont fait disparaître l'erreur après la recompilation.