Build: Cannot find name Promise - Visual Studio 2015 w/ MVC6 and Angular 2

Question

First of all: I've checked these:

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

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

Typescript cannot find name 'Promise' despite using ECMAScript 6

how to use es6-promises with typescript?

Visual Studio Code: Cannot find name angular?

How to get rid of Angular2 / TypeScript errors on Cannot find map, Promise ... when targeting -es5

And many many many more. Been banging my head for 2 days now.

And yes:

I have referenced in my boot.ts file (or bootstrap file):

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

Now, to the problem: I'm using Visual Studio 2015 W/ Update 1 and an ASP.NET MVC 6 project (Release Candidate 1) + Typescript 1.8.1.

I used this tutorial to do the setup: http://www.mithunvp.com/angular-2-in-asp-net-5-typescript-visual-studio-2015/

I've been using Angular 2 successfully for a while, and now THE SAME CODE (afaik) will not compile. It will give me the "Cannot find name: Promise" in browser.d.ts file", located in 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/'));
});

I've even tried using the reference path inside the node_module/angular2/platform/browser.d.ts file, and it threw an error for using reference path in non-module files.

The only thing is somewhat working (I didn't implement it fully, because it is insane):Copy and paste the code inside es6-promise.d.ts file in all the files that are asking it.

Edit Sniff Sniff Something is smelling bad in here: I decided to rename the node_module folder into _bak_node_module_folder and reinstalled all the 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 

I really really hate this character limitation with Windows. If this is the problem, I think I'll jump myself from the tallest bridge in my city.

Edit x2 So, I decided to update Visual Studio's NPM as suggested and it didn't work out. So I decided to grab Nodejs and run it from the cmd. Unfortunately the problem still persists:

Here is the output:

[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.

Answer 1

The REASON for this is that you are targeting ES5, which does not have Promises. If you change to ES6 the error will magically disappear.

If you do need to target ES5, just use the es6-shim mentioned with previous answers.

Answer 2

I just ran into this exact same issue after updating es-promise from 3.0.2 to 3.1.2. I ultimately ended up installing the newer version of nodejs with a newer version of npm and then deleted my node_module folder and reinstalled the packages. I then added the reference path to the main.ts or boot.ts (whatever you named it) file. That fixed it.

Just like Steve said.

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

Answer 3

This solved it for me, using Angular 2.0.0-rc.1: In the class where you're bootstrapping Angular, put this line on top:

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

Answer 4

I was running into the same problem for a long time in Visual Studio. I noticed that if you do not wait for ALL of your npm Dependencies to restore BEFORE you try to build, you put your project into a world of hurt.

My advice, go back to the original dependency versions in your package.json file from the demo project on mithunvp.com. Wait for the dependencies to restore, then rebuild your VS project.

For the character limit issue, you must update npm within Visual Studio.
See: Upgrade npm on Windows