1. 技术文章
  2. Build: Cannot find name Promise - Visual Studio 2015 w/ MVC6 and Angular 2

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

由 谁说我不能喝 提交于 2019-12-03 06:46:22
tomitrescak

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.

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

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

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

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.

This is what fixed it for me:

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

on top of the main .ts file.

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.

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.

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,
   }
}

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

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

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.

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.

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.

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

标签
typescript
visual-studio-2015
angular
asp.net-core-mvc
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!