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

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

Answer 6

This is what fixed it for me:

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

on top of the main .ts file.

Answer 7

Upate for VS2015 with Angular2 RC5:

(This answer assumes you are generally following the angular2 Quick Start at angular.io and trying to get it to work in a VS2015 project.)

Add the following line to the top of your main.ts file (adjust path according to your project's actual file structure):

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

The typings file referenced above gets imported automatically upon build based on the contents of the typings.json file.

You may also need to add a line to your .csproj project file to get the project to compile (VS2015 update 3 currently ignores the tsconfig.json line for "experimentalDecorators"). To do this, first unload your project by right-clicking on your project in the solution explorer window and clicking 'unload project'. Open your .csproj file and look for a < PropertyGroup> node containing other < Typescript...> elements. Add an element for TypeScript experimental decorators at the bottom before the closing tag like this:

< PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Debug|AnyCPU' ">

...

< TypeScriptExperimentalDecorators>true< /TypeScriptExperimentalDecorators>

< /PropertyGroup>

Load your project and rebuild. It should compile now without error. If you still have issues, make sure you have the latest version of TypeScript installed (at least 1.8.x). In Visual Studio, go to Tools > Extensions and Updates... and search for TypeScript. Install the "TypeScript 1.8.x for Visual Studio 2015" extension. Also available at https://www.microsoft.com/en-us/download/details.aspx?id=48593.

If you have nodejs installed, you can install TypeScript from the command line by entering the command: "npm install -g typescript". Check your installed TypeScript version from a Node.js command window with the command: "tsc -v". Running this command from a standard command window will likely only show "Version 1.0.3.0" instead of the expected Version 1.8.x. (For more information, see how to synchronize Node.js with VS2015 at http://ryanhayes.net/synchronize-node-js-install-version-with-visual-studio-2015/)

Hope this helps someone.

Answer 8

I resolved this issue by downloading es6-shim.d.ts from DefinitelyTyped and reference it in boot.ts where I have angular2 bootstrap using this code

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

I have also removed this reference as it created conflicts.

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

This resolve my issues and my files were compiled correctly with no errors.

Answer 9

Another solution is to add a reference to

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

in the top of the file where you bootstraping angular and make sure you add

"moduleResolution": "node",

to "compilerOptions" of your tsconfig.json something like:

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

Answer 10

There may be another reason. I am able to reproduce your error if I don't exclude the node_modules directory. You may need to make sure you don't have a project file somewhere.

{
    "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"
    ]
}

The problem is described here: https://github.com/Microsoft/TypeScript/issues/3983. The Typescript compilation basically ignores your tsconfig.json

Answer 11

My problem was caused by the boot.ts/main.ts file. The issue was fixed by adding at the first line the reference to the "browser.d.ts" file:
///<reference path="../node_modules/angular2/typings/browser.d.ts"/>

Answer 12

I don't think solving this issue by adding ///<reference path""/> to your main.ts (or wherever you bootstrap Angular2) is the ideal solution. The issue your facing has to do with your placement of tsconfig.json and the gulp script` you're using to setup your Angular2 project. Before I can help out more, can you check the following?

1. did you run the npm script to install typings (i.e., typings install) so that there is a typings folder in your project? What folders are in your typings folder? globals? browser?
2. what is the contents of your gulp task to compile typescript? did you use gulp-typescript or gulp-tsc or something else?

The directory containing your tsconfig.json file is considered the root of your TypeScript project. Therefore, any .ts/.d.ts files under your TypeScript project will try to be compiled (including files in your typings folder and/or www/libs folder. I can see that you included an "exclude": ["node_modules"] to your tsconfig.json, so the 'Cannot find name Promise issue' is not coming from the node_modules folder (its most likely coming from your typings folder and/or www/libs folder.

I'm pretty sure that you resolve the Cannot find name Promise issue without having to add ///<reference path""/> to the top of your bootstrap file (main.ts most likely) by adding an extra to your "exclude" in your typings.json or your gulptask in your gulpfile.js.

Don't get me wrong, adding ///<reference path"/> will solve your issue, but I don't think its the ideal solution.

Answer 13

I tried all kind suggenstions here and thought everything should be correctly configured. The errors still showed up.

What helped in my case: I closed all open file tabs in Visual Studio and built the solution again. Et voilà, the errors had gone.

Answer 14

For me the issue was not Angular2 specific as I am in fact using polymerTS. With the Promise polyfill, I couldnt use promises in my Polymer component ts files. The solution for me was installing the type for Promise from NPM using the following command.

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

For me I didn't even have to reference the d.ts file in my Polymer ts file. Just worked. However you may need to just simply drag the index.d.ts file located in the es6-promise directory, to the file you are trying to call the Promise object on. This will create the reference for you automatically.

Answer 15

Change target to "es6" in your tsconfig.json

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

Or install TypeScript for Visual Studio 2015 can also solve this problem without modify tsconfig.json

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