web-dev-qa-db-fra.com

Build: Impossible de trouver le nom Promise - Visual Studio 2015 w/MVC6 et Angular 2

Tout d'abord: J'ai vérifié ceux-ci:

https://github.com/angular/angular/issues/7052

https://github.com/angular/angular/issues/4902

TypeScript ne trouve pas le nom 'Promise' malgré l'utilisation d'ECMAScript 6

comment utiliser es6-promises avec un manuscrit?

Code Visual Studio: Vous ne trouvez pas le nom angular?

Comment se débarrasser des erreurs Angular2/TypeScript sur Impossible de trouver la carte, Promise ... lors du ciblage -es5

Et beaucoup plus encore. Me frappe la tête depuis 2 jours maintenant. 

Et oui:

J'ai référencé dans mon fichier boot.ts (ou fichier bootstrap):

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>

Passons maintenant au problème: j'utilise Visual Studio 2015 W/Update 1 et un projet ASP.NET MVC 6 (Release Candidate 1) + TypeScript 1.8.1.

J'ai utilisé ce tutoriel pour faire la configuration: http://www.mithunvp.com/angular-2-in-asp-net-5-TypeScript-visual-studio-2015/

J'utilise Angular 2 avec succès depuis un moment et maintenant, THE SAME CODE (autant que je sache) ne compile pas. Cela me donnera le "nom introuvable: Promise" dans le fichier browser.d.ts ", situé dans node_modules/angular2/platform:

tsconfig.json

 {
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "outDir": "../wwwroot/appScripts/",
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules"
  ]
}

package.json

{
    "version": "1.0.0",
    "name": "asp.net", 
  "private": true,
  "dependencies": {
    "angular2": "2.0.0-beta.11",
    "systemjs": "0.19.24",
    "es6-promise": "^3.1.2",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.6.4"
  },
  "devDependencies": {
    "gulp": "^3.9.1"
  }
}

gulpfile.js

/*
This file in the main entry point for defining Gulp tasks and using Gulp plugins.
Click here to learn more. http://go.Microsoft.com/fwlink/?LinkId=518007
*/

/// <binding AfterBuild='moveToLibs' />

var gulp = require('gulp');

gulp.task('default', function () {
    // place code for your default task here
});

gulp.task('moveToLibs', function () {
    gulp.src([
      'node_modules/angular2/bundles/js',
      'node_modules/angular2/bundles/angular2.*.js*',
      'node_modules/angular2/bundles/angular2-polyfills.js',
      'node_modules/angular2/bundles/http.*.js*',
      'node_modules/angular2/bundles/router.*.js*',
      'node_modules/es6-shim/es6-shim.min.js*',
      'node_modules/angular2/es6/dev/src/testing/shims_for_IE.js',
      'node_modules/systemjs/dist/*.*',
      'node_modules/jquery/dist/jquery.*js',
      'node_modules/bootstrap/dist/js/bootstrap*.js',
      'node_modules/rxjs/bundles/Rx.js'
    ]).pipe(gulp.dest('./wwwroot/libs/'));
});

J'ai même essayé d'utiliser le chemin de référence dans le fichier node_module/angular2/platform/browser.d.ts, et une erreur s'est produite lors de l'utilisation du chemin de référence dans des fichiers non-modules. 

La seule chose qui fonctionne un peu (je ne l'ai pas complètement implémenté, car c'est insensé): Copiez et collez le code dans le fichier es6-promise.d.ts dans tous les fichiers qui le demandent.

EditSniff _ {Sniff Quelque chose sent mauvais ici: J'ai décidé de renommer le dossier node_module en _bak_node_module_folder et de réinstaller tous les packages: 

    Severity    Code    Description Project File    Line    Suppression State
Error   MSB4018 The "FindConfigFiles" task failed unexpectedly.
System.IO.PathTooLongException: The specified path, file name, or both are too long. The fully qualified file name must be less than 260 characters, and the directory name must be less than 248 characters.
   at System.IO.Path.NormalizePath(String path, Boolean fullCheck, Int32 maxPathLength, Boolean expandShortPaths)
   at System.IO.Path.GetDirectoryName(String path)
   at System.IO.FileSystemEnumerableIterator`1..ctor(String path, String originalUserPath, String searchPattern, SearchOption searchOption, SearchResultHandler`1 resultHandler, Boolean checkHost)
   at System.IO.Directory.EnumerateFiles(String path)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherFiles(String directoryPath, String projectPath, Func`2 filter)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherFiles(String directoryPath, String projectPath, Func`2 filter)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherFiles(String directoryPath, String projectPath, Func`2 filter)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherFiles(String directoryPath, String projectPath, Func`2 filter)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherFiles(String directoryPath, String projectPath, Func`2 filter)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherFiles(String directoryPath, String projectPath, Func`2 filter)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherFiles(String directoryPath, String projectPath, Func`2 filter)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherFiles(String directoryPath, String projectPath, Func`2 filter)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherFiles(String directoryPath, String projectPath, Func`2 filter)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherFiles(String directoryPath, String projectPath, Func`2 filter)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherFiles(String directoryPath, String projectPath, Func`2 filter)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherFiles(String directoryPath, String projectPath, Func`2 filter)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherFiles(String directoryPath, String projectPath, Func`2 filter)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherFiles(String directoryPath, String projectPath, Func`2 filter)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherFiles(String directoryPath, String projectPath, Func`2 filter)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherFiles(String directoryPath, String projectPath, Func`2 filter)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherFiles(String directoryPath, String projectPath, Func`2 filter)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherFiles(String directoryPath, String projectPath, Func`2 filter)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherConfigFiles(String directoryPath, String projectPath)
   at TypeScript.Tasks.FindConfigFiles.FindConfigFilesOnDisk()
   at TypeScript.Tasks.FindConfigFiles.Execute()
   at Microsoft.Build.BackEnd.TaskExecutionHost.Microsoft.Build.BackEnd.ITaskExecutionHost.Execute()
   at Microsoft.Build.BackEnd.TaskBuilder.<ExecuteInstantiatedTask>d__26.MoveNext() Angular2    C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\TypeScript\Microsoft.TypeScript.targets 153

Je déteste vraiment cette limitation de personnage sous Windows. Si tel est le problème, je pense que je vais sauter moi-même du plus haut pont de ma ville. 

Edit x2 J'ai donc décidé de mettre à jour le NPM de Visual Studio comme suggéré et cela n'a pas fonctionné. J'ai donc décidé de récupérer Nodejs et de l'exécuter depuis le cmd. Malheureusement, le problème persiste:

Voici la sortie:

[0] node_modules/angular2/typings/browser.d.ts(6,14): error TS2300: Duplicate identifier 'PromiseConstructor'.
[0] node_modules/angular2/typings/es6-collections/es6-collections.d.ts(22,5): error TS2300: Duplicate identifier 'done'.
[0] node_modules/angular2/typings/es6-collections/es6-collections.d.ts(23,5): error TS2300: Duplicate identifier 'value'.
[0] node_modules/angular2/typings/es6-collections/es6-collections.d.ts(46,5): error TS2300: Duplicate identifier 'size'.
[0] node_modules/angular2/typings/es6-collections/es6-collections.d.ts(52,5): error TS2300: Duplicate identifier 'prototype'.
[0] node_modules/angular2/typings/es6-collections/es6-collections.d.ts(66,5): error TS2300: Duplicate identifier 'size'.
[0] node_modules/angular2/typings/es6-collections/es6-collections.d.ts(72,5): error TS2300: Duplicate identifier 'prototype'.
[0] node_modules/angular2/typings/es6-collections/es6-collections.d.ts(88,5): error TS2300: Duplicate identifier 'prototype'.
[0] node_modules/angular2/typings/es6-collections/es6-collections.d.ts(103,5): error TS2300: Duplicate identifier 'prototype'.
[0] node_modules/angular2/typings/es6-promise/es6-promise.d.ts(11,15): error TS2300: Duplicate identifier 'Promise'.
[0] node_modules/angular2/typings/es6-promise/es6-promise.d.ts(42,16): error TS2300: Duplicate identifier 'Promise'.
[0] typings/browser/ambient/es6-shim/index.d.ts(11,5): error TS2300: Duplicate identifier 'done'.
[0] typings/browser/ambient/es6-shim/index.d.ts(12,5): error TS2300: Duplicate identifier 'value'.
[0] typings/browser/ambient/es6-shim/index.d.ts(477,11): error TS2300: Duplicate identifier 'Promise'.
[0] typings/browser/ambient/es6-shim/index.d.ts(496,11): error TS2300: Duplicate identifier 'PromiseConstructor'.
[0] typings/browser/ambient/es6-shim/index.d.ts(554,13): error TS2300: Duplicate identifier 'Promise'.
[0] typings/browser/ambient/es6-shim/index.d.ts(563,5): error TS2300: Duplicate identifier 'size'.
[0] typings/browser/ambient/es6-shim/index.d.ts(572,5): error TS2300: Duplicate identifier 'prototype'.
[0] typings/browser/ambient/es6-shim/index.d.ts(583,5): error TS2300: Duplicate identifier 'size'.
[0] typings/browser/ambient/es6-shim/index.d.ts(592,5): error TS2300: Duplicate identifier 'prototype'.
[0] typings/browser/ambient/es6-shim/index.d.ts(607,5): error TS2300: Duplicate identifier 'prototype'.
[0] typings/browser/ambient/es6-shim/index.d.ts(621,5): error TS2300: Duplicate identifier 'prototype'.
[0] 2:47:31 PM - Compilation complete. Watching for file changes.
typescriptvisual-studio-2015angularasp.net-core-mvc
8
Jose A

La raison en est que vous ciblez ES5, qui n’a pas Promises . Si vous passez à ES6, l'erreur disparaîtra comme par magie.

Si vous devez cibler ES5, utilisez simplement le es6-shim mentionné dans les réponses précédentes.

6
tomitrescak

Je viens de rencontrer exactement le même problème après la mise à jour de es-promise 3.0.2 à 3.1.2. J'ai finalement fini par installer la version plus récente de nodejs avec une version plus récente de npm, puis j'ai supprimé mon dossier node_module et réinstallé les packages. J'ai ensuite ajouté le chemin de référence au fichier main.ts ou boot.ts (quel que soit votre nom). Cela l'a corrigé.

Tout comme Steve a dit.

///<reference path="../../node_modules/angular2/typings/browser.d.ts"/>
4
Andre L

Cela a résolu le problème en utilisant Angular 2.0.0-rc.1: Dans la classe où vous démarrez Angular, mettez cette ligne au-dessus:

/// <reference path="../typings/browser/ambient/es6-shim/index.d.ts"/>
4
Mcanic

Je rencontrais depuis longtemps le même problème dans Visual Studio. J'ai remarqué que si vous n'attendez pas que TOUS vos dépendances npm soient restaurées AVANT de tenter de construire, vous mettez votre projet dans un monde de souffrances.

Mon conseil: revenez aux versions de dépendance d'origine dans votre fichier package.json à partir du projet de démonstration sur mithunvp.com. Attendez que les dépendances soient restaurées, puis reconstruisez votre projet VS.

Pour le problème de limite de caractères, vous devez mettre à jour npm dans Visual Studio.
Voir: Mettre à jour npm sous Windows

2
Karl P

Ce problème de définitions de type ES6 a été un cauchemar pour moi aujourd’hui: j’ai parcouru de nombreuses réponses SO qui ont essayé de contourner le problème de différentes manières, notamment:

  • Ajoutez une ou plusieurs références "triple barre oblique" au fichier d'amorçage TS, ce que je ne souhaite vraiment pas faire, surtout que browser.d.ts n'est plus inclus par les derniers contrôleurs Angular2.
  • Installez typings et/ou téléchargez es6-shim.d.ts manuellement, ce que je voudrais aussi éviter car je recherche une solution qui ne m'oblige pas à sortir de l'interface graphique VS2015.

Après de nombreuses recherches je suis arrivé avec cette solution de contournement qui semble résoudre définitivement le problème en quelques étapes simples:

  • ajoutez typings dans le fichier package.json du projet.
  • ajoutez un bloc script dans ce même fichier package.json pour exécuter/mettre à jour les typages après chaque action NPM.
  • ajoutez un fichier typings.json dans le dossier racine du projet contenant une référence à core-js (globalement supérieur à es6-shim atm).

C'est tout.

Vous pouvez également consulter cet article sur mon blog pour plus de détails concernant ce problème.

2
Darkseal

C'est ce qui l'a corrigé pour moi:

///<reference path="./../typings/globals/core-js/index.d.ts"/>

sur le fichier principal .ts.

1
July.Tech

J'ai résolu ce problème en téléchargeant es6-shim.d.ts à partir de DefinitelyTyped et en référence dans boot.ts où j'ai angular2 bootstrap en utilisant ce code

/// <reference path="../typings/es6-shim/es6-shim.d.ts"/>

J'ai également supprimé cette référence car elle créait des conflits. 

///<reference path="../../node_modules/angular2/typings/browser.d.ts"/>

Cela résout mes problèmes et mes fichiers ont été compilés correctement sans erreurs.

0
Fayez Mutairi

Remplacez la cible par "es6" dans votre tsconfig.json

"compilerOptions": {"target": "es6" }

Ou installer TypeScript pour Visual Studio 2015 peut également résoudre ce problème sans modifier tsconfig.json

https://www.Microsoft.com/en-us/download/details.aspx?id=48593

0
Jie Wang

Il peut y avoir une autre raison. Je suis capable de reproduire votre erreur si je n'exclus pas le répertoire node_modules. Vous devrez peut-être vous assurer de ne pas avoir un fichier de projet quelque part.

{
    "compileOnSave": true,
    "compilerOptions": {
        "target": "es5",
        "module": "system",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
        "noEmitOnError": true
    },
    "exclude": [
        "node_modules",
        "exclude"
    ]
}

Le problème est décrit ici: https://github.com/Microsoft/TypeScript/issues/3983 . La compilation TypeScript ignore fondamentalement votre tsconfig.json

0
Andres M

Mon problème a été causé par le boot.ts/main.ts fichier . Le problème a été résolu en ajoutant à la première ligne la référence au "browser.d.ts" fichier:
///<reference path="../node_modules/angular2/typings/browser.d.ts"/>

0
Diego Torres

Upate pour VS2015 avec Angular2 RC5: 

(Cette réponse suppose que vous suivez généralement le démarrage rapide angular2 sur angular.io et que vous essayez de le faire fonctionner dans un projet VS2015.)

Ajoutez la ligne suivante en haut de votre fichier main.ts (ajustez le chemin en fonction de la structure de fichier de votre projet):

/// <reference path = "../ typings/globals/core-js/index.d.ts" />

Le fichier de typages référencé ci-dessus est importé automatiquement lors de la création en fonction du contenu du fichier typings.json. 

Vous devrez peut-être également ajouter une ligne à votre fichier de projet .csproj pour le compiler (la mise à jour 3 de VS2015 ignore actuellement la ligne tsconfig.json pour "experimentalDecorators"). Pour ce faire, commencez par décharger votre projet en cliquant avec le bouton droit de la souris sur la fenêtre Explorateur de solutions et en cliquant sur "Décharger le projet". Ouvrez votre fichier .csproj et recherchez un nœud <PropertyGroup> contenant d'autres éléments <TypeScript ...>. Ajoutez un élément pour les décorateurs expérimentaux TypeScript en bas avant la balise de fermeture, comme ceci:

<PropertyGroup Condition = "'$ (Configuration) | $ (Platform)' == 'Débogage | AnyCPU'">

...

<TypeScriptExperimentalDecorators> true </ TypeScriptExperimentalDecorators>

</PropertyGroup>

Chargez votre projet et reconstruisez. Il devrait compiler maintenant sans erreur. Si vous rencontrez toujours des problèmes, assurez-vous que la dernière version de TypeScript est installée (au moins 1.8.x). Dans Visual Studio, accédez à Outils> Extensions et mises à jour ... et recherchez TypeScript. Installez l'extension "TypeScript 1.8.x pour Visual Studio 2015". Egalement disponible sur https://www.Microsoft.com/en-us/download/details.aspx?id=48593 . 

Si vous avez installé nodejs, vous pouvez installer TypeScript à partir de la ligne de commande en entrant la commande suivante: "npm install -g TypeScript". Vérifiez votre version TypeScript installée à partir d'une fenêtre de commande Node.js à l'aide de la commande "tsc -v". L'exécution de cette commande à partir d'une fenêtre de commande standard ne montrera probablement que "Version 1.0.3.0" au lieu de la version 1.8.x. (Pour plus d'informations, voir comment synchroniser Node.js avec VS2015 à http://ryanhayes.net/synchronize-node-js-install-version-with-visual-studio-2015/ ) 

J'espère que ça aide quelqu'un.

0
Bit Monkey

Une autre solution consiste à ajouter une référence à 

///<reference path="../../node_modules/angular2/typings/browser.d.ts"/>

dans le haut du fichier où vous démarrez angular et assurez-vous que vous ajoutez 

"moduleResolution": "node",

vers "compilerOptions" de votre tsconfig.json quelque chose comme: 

{
   "compilerOptions": {
       "target": "es5",
       "module": "system",
       "moduleResolution": "node",
       "emitDecoratorMetadata": true,
       "experimentalDecorators": true,
   }
}
0
Fayez Mutairi

Je ne pense pas que résoudre ce problème en ajoutant ///<reference path""/> à votre fichier main.ts (ou à l'endroit où vous démarrez Angular2) est la solution idéale. Le problème que vous rencontrez a à voir avec votre placement de tsconfig.json et du script gulp que vous utilisez pour configurer votre projet Angular2. Avant que je puisse aider davantage, pouvez-vous vérifier les éléments suivants?

  1. avez-vous exécuté le script npm pour installer des typings (c'est-à-dire, installer des typings) de manière à ce qu'il y ait un dossier de typings dans votre projet? Quels dossiers se trouvent dans votre dossier typings? globals? browser? 
  2. quel est le contenu de votre tâche gulp pour compiler un script dactylographique? Avez-vous utilisé gulp-TypeScript ou gulp-tsc ou autre chose?

Le répertoire contenant votre fichier tsconfig.json est considéré comme la racine de votre projet TypeScript. Par conséquent, tous les fichiers .ts/.d.ts de votre projet TypeScript essaieront d’être compilés (y compris les fichiers de votre dossier typings et/ou www/libs. Je constate que vous avez inclus un "exclude": ["node_modules"] votre tsconfig.json, le problème 'Impossible de trouver le nom du promesse' ne provient donc pas du dossier node_modules (il provient probablement de votre dossier typings et/ou www/libs.

Je suis presque sûr que vous résolvez le problème Cannot find name Promise sans avoir à ajouter ///<reference path""/> en haut de votre fichier d'amorçage (main.ts probablement) en ajoutant un extra à votre "exclude" dans votre typings.json ou votre gulptask dans votre gulpfile.js.

Ne vous méprenez pas, l'ajout de ///<reference path"/> résoudra votre problème, mais je ne pense pas que ce soit la solution idéale.

0
kimbaudi

J'ai essayé tous les types de suggestions ici et j'ai pensé que tout devrait être configuré correctement. Les erreurs sont toujours apparues. 

Ce qui a aidé dans mon cas: J'ai fermé tous les onglets de fichiers ouverts dans Visual Studio et créé à nouveau la solution. Et voilà, les erreurs avaient disparu.

0
martinoss

Pour moi, le problème n’était pas spécifique à Angular2, car j’utilise en fait des polymerTS. Avec le Polyfill Promise, je ne pouvais pas utiliser de promesses dans mes fichiers ts de composant Polymer. La solution pour moi consistait à installer le type pour Promise from NPM à l'aide de la commande suivante.

npm install @types/es6-promise -save-dev

Pour moi, je n'avais même pas besoin de référencer le fichier d.ts dans mon fichier Polymer ts. Je viens de travailler. Cependant, vous devrez peut-être simplement faire glisser le fichier index.d.ts situé dans le répertoire es6-promise vers le fichier que vous essayez d'appeler l'objet Promise. Cela va créer la référence pour vous automatiquement.

0
Dean Martin