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.

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

Solution 2

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"/>

Solution 3

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"/>

Solution 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

Solution 5

This ES6 type definitions issue has been a nightmare for me today: I ran through a lot of SO answers that tried to work around the issue in a number of ways, including:

• Add one or more "triple-slash" references to the bootstrap TS file, which is something I really don't want to do, expecially now that browser.d.ts is not included anymore by Angular2 most recent RCs.
• Install typings and/or download es6-shim.d.ts manually, which is also something I would avoid because I'm looking for a solution that doesn't force me to go outside the VS2015 GUI.

After a lot of research I came out with this workaround which seems to fix the issue for good with few simple steps:

• add typings in the project's package.json file.
• add a script block in that very same package.json file to execute/update typings after each NPM action.
• add a typings.json file in the project's root folder containing a reference to core-js (overall better than es6-shim atm).

That's it.

You can also take a look to this post on my blog for additional details regarding the issue.

View more solutions

Comments

[Jose A]

Thanks for the tip :)

[Jose A]

Thanks! I'll check it later on tonight! Will post back.

[Jose A]

I got that file only from here: github.com/DefinitelyTyped/DefinitelyTyped/blob/master/es6-s‌​him/… but is giving me more errors now.

[Jose A]

It gives me Duplicate identifier 'PropertyKey'. I even tried reinstalling all packages and nothing :/

[Jose A]

YES. THIS HELPED! Now, it compiles in Nodejs, but it does not compile in Visual Studio @_@. I can't even prevent from compiling it when I build the project.

[Sergey]

I am using Typescript 2.0.2 beta in VS 2015 and this command fixed that issue: npm install --save @types/core-js more info here - blogs.msdn.microsoft.com/typescript/2016/06/15/… now I can finally build my project in VS 2015.