构建:找不到名称 Promise - 带有 MVC6 和 Angular 2 的 Visual Studio 2015

Posted

技术标签:

【中文标题】构建:找不到名称 Promise - 带有 MVC6 和 Angular 2 的 Visual Studio 2015【英文标题】:Build: Cannot find name Promise - Visual Studio 2015 w/ MVC6 and Angular 2 【发布时间】:2016-03-23 12:54:37 【问题描述】:

首先: 我检查了这些:

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

还有很多很多很多。这两天一直在敲我的头。

是的:

我已经在我的 boot.ts 文件(或引导文件)中引用了:

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

现在,问题是:我正在使用 Visual Studio 2015 W/Update 1 和一个 ASP.NET MVC 6 项目(Release Candidate 1)+ Typescript 1.8.1。

我使用本教程进行设置: http://www.mithunvp.com/angular-2-in-asp-net-5-typescript-visual-studio-2015/

我已经成功使用 Angular 2 一段时间了,但现在 THE SAME CODE (afaik) 无法编译。它会给我“在 browser.d.ts 文件中找不到名称:Promise”,位于 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/'));
);

我什至尝试在 node_module/angular2/platform/browser.d.ts 文件中使用参考路径,但在非模块文件中使用参考路径时会出错。

唯一有点工作(我没有完全实现它,因为它很疯狂):复制并粘贴 es6-promise.d.ts 文件中的所有文件中的代码。

编辑 Sniff Sniff 这里有什么难闻的气味: 我决定将 node_module 文件夹重命名为 _bak_node_module_folder 并重新安装所有包:

    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 

我真的很讨厌 Windows 的这种字符限制。如果这是问题所在,我想我会从我所在城市最高的桥上跳下来。

编辑 x2 因此,我决定按照建议更新 Visual Studio 的 NPM,但没有成功。所以我决定抓住 Nodejs 并从 cmd 运行它。不幸的是,问题仍然存在:

这是输出:

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

【问题讨论】:

没有回答你原来的问题,但是关于字符限制 - 你更新到 NPM v3 了吗?他们对包的存储方式进行了更改,从而减少了这方面的问题。 感谢您的回复。我目前正在通过 node.js 控制台更新 npm,会告诉你进展如何。 @JoeClay:废话,我仍然被 152 个问题所困扰。另一方面,让我惊讶的是 VS 2015 附带了如此低版本的 npm。安装后,所有深层层次结构都被拉回主根目录(现在我有大约 238 个包......) 我真的不想为 Node CL 放弃 Visual Studio...它让我的生活更容易直接在同一个 IDE 中工作。 我还没有解决这个问题。我仍然不知道问题是在 Angular 本身还是依赖项。如果我找到解决方案,我会回复。 【参考方案1】:

原因是您的目标是 ES5,它没有 Promises。如果你改成 ES6,错误就会神奇地消失。

如果您确实需要针对 ES5,只需使用前面答案中提到的 es6-shim。

【讨论】:

【参考方案2】:

在将 es-promise 从 3.0.2 更新到 3.1.2 后,我刚刚遇到了同样的问题。我最终最终使用更新版本的 npm 安装了更新版本的 nodejs,然后删除了我的 node_module 文件夹并重新安装了软件包。然后,我将引用路径添加到 main.ts 或 boot.ts(无论您如何命名)文件。这样就解决了。

就像史蒂夫说的那样。

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

【讨论】:

谢谢!今晚晚些时候我会检查它!会回帖。 是的。这有帮助!现在,它在 Nodejs 中编译,但在 Visual Studio @_@ 中不编译。构建项目时,我什至无法阻止编译它。​​【参考方案3】:

这为我解决了这个问题,使用 Angular 2.0.0-rc.1: 在您引导 Angular 的课程中​​,将这一行放在最上面:

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

【讨论】:

【参考方案4】:

我在 Visual Studio 中长期遇到同样的问题。我注意到,如果您在尝试构建之前不等待所有 npm 依赖项恢复,您会将您的项目置于一个受伤的世界。

我的建议是,从 mithunvp.com 上的演示项目返回 package.json 文件中的原始依赖版本。等待依赖恢复,然后重建你的 VS 项目。

对于字符限制问题,您必须在 Visual Studio 中更新 npm。 见:Upgrade npm on Windows

【讨论】:

感谢您的提示 :)【参考方案5】:

这个 ES6 类型定义问题今天对我来说是一场噩梦:我浏览了很多 SO 答案,试图以多种方式解决这个问题,包括:

向引导 TS 文件添加一个或多个“三斜杠”引用,这是我真的不想做的事情,特别是现在 Angular2 不再包含 browser.d.ts最近的 RC。 安装 typings 和/或手动下载 es6-shim.d.ts,这也是我会避免的,因为我正在寻找一种不会强迫我离开 VS2015 的解决方案图形用户界面。

经过大量研究I came out with this workaround 似乎只需几个简单的步骤就可以彻底解决问题:

在项目的package.json 文件中添加typings。 在同一个 package.json 文件中添加一个 script 块,以在每个 NPM 操作后执行/更新类型。 在项目的根文件夹中添加一个typings.json 文件,其中包含对core-js 的引用(总体优于es6-shim atm)。

就是这样。

您也可以在我的博客上查看this post,了解有关此问题的更多详细信息。

【讨论】:

我在 VS 2015 中使用 Typescript 2.0.2 beta 并且这个命令修复了这个问题:npm install --save @types/core-js 更多信息在这里 - blogs.msdn.microsoft.com/typescript/2016/06/15/… 现在我终于可以构建我的VS 2015 中的项目。【参考方案6】:

这是为我解决的问题:

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

在主 .ts 文件的顶部。

【讨论】:

【参考方案7】:

使用 Angular2 RC5 更新 VS2015

(此答案假设您通常遵循 angular.io 上的 angular2 快速入门并尝试使其在 VS2015 项目中工作。)

将以下行添加到您的 main.ts 文件的顶部(根据您项目的实际文件结构调整路径):

///

上面引用的类型文件会在构建时根据类型文件的内容自动导入。

您可能还需要在 .csproj 项目文件中添加一行以编译项目(VS2015 更新 3 当前忽略“experimentalDecorators”的 tsconfig.json 行)。为此,首先通过在解决方案资源管理器窗口中右键单击您的项目并单击“卸载项目”来卸载您的项目。打开您的 .csproj 文件并查找包含其他 元素的 节点。在结束标记之前的底部添加一个用于 TypeScript 实验性装饰器的元素,如下所示:

...

true

加载您的项目并重建。它现在应该编译没有错误。如果您仍然有问题,请确保您安装了最新版本的 TypeScript(至少 1.8.x)。在 Visual Studio 中,转到工具 > 扩展和更新...并搜索 TypeScript。安装“TypeScript 1.8.x for Visual Studio 2015”扩展。也可在https://www.microsoft.com/en-us/download/details.aspx?id=48593 获得。

如果你安装了 nodejs,你可以从命令行输入命令“npm install -g typescript”来安装 TypeScript。使用以下命令从 Node.js 命令窗口检查您安装的 TypeScript 版本:“tsc -v”。从标准命令窗口运行此命令可能只会显示“版本 1.0.3.0”,而不是预期的版本 1.8.x。 (更多信息请参阅http://ryanhayes.net/synchronize-node-js-install-version-with-visual-studio-2015/如何将Node.js与VS2015同步)

希望这对某人有所帮助。

【讨论】:

【参考方案8】:

我通过从DefiniteTyped 下载es6-shim.d.ts 解决了这个问题,并在boot.ts 中引用它,我使用此代码进行了angular2 引导

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

我还删除了此引用,因为它会产生冲突。

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

这解决了我的问题,我的文件被正确编译,没有错误。

【讨论】:

我只从这里获得了该文件:github.com/DefinitelyTyped/DefinitelyTyped/blob/master/es6-shim/… 但现在给了我更多错误。 它给了我重复的标识符“PropertyKey”。我什至尝试重新安装所有软件包,但什么也没有:/【参考方案9】:

另一种解决方案是添加对

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

在文件顶部引导角度并确保添加

"moduleResolution": "node",

到您的 tsconfig.json"compilerOptions" 类似:


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

【讨论】:

【参考方案10】:

可能还有其他原因。如果我不排除 node_modules 目录,我能够重现您的错误。您可能需要确保在某处没有项目文件。


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

这里描述了问题:https://github.com/Microsoft/TypeScript/issues/3983。 Typescript 编译基本上会忽略您的 tsconfig.json

【讨论】:

【参考方案11】:

我的问题是由 boot.ts/main.ts 文件引起的。 通过在第一行添加对 "browser.d.ts" 文件的引用来解决此问题: ///&lt;reference path="../node_modules/angular2/typings/browser.d.ts"/&gt;

【讨论】:

【参考方案12】:

我不认为通过将///&lt;reference path""/&gt; 添加到您的 main.ts(或您引导 Angular2 的任何位置)来解决此问题是理想的解决方案。您面临的问题与您放置 tsconfig.json 和您用于设置 Angular2 项目的 gulp 脚本有关。在我提供更多帮助之前,您能否检查以下内容?

    您是否运行了 npm 脚本来安装类型(即,类型安装),以便在您的项目中有一个类型文件夹?您的typings 文件夹中有哪些文件夹? globals? browser? 编译 typescript 的 gulp 任务的内容是什么?你用了gulp-typescriptgulp-tsc 还是别的什么?

包含 tsconfig.json 文件的目录被视为 TypeScript 项目的根目录。因此,您的 TypeScript 项目下的任何 .ts/.d.ts 文件都将尝试编译(包括您的 typings 文件夹和/或 www/libs 文件夹中的文件。我可以看到您包含了一个“排除”:[“ node_modules"] 到您的 tsconfig.json,因此“找不到名称承诺问题”不是来自 node_modules 文件夹(它很可能来自您的 typings 文件夹和/或 www/libs 文件夹。

我很确定您可以通过在 @987654336 中的“排除”中添加额外内容来解决 Cannot find name Promise 问题,而无需将 ///&lt;reference path""/&gt; 添加到引导文件的顶部(很可能是 main.ts) @ 或您在 gulpfile.js 中的 gulptask。

不要误会,添加///&lt;reference path"/&gt; 会解决您的问题,但我认为这不是理想的解决方案。

【讨论】:

【参考方案13】:

我在这里尝试了各种建议,并认为一切都应该正确配置。错误仍然出现。

对我来说有什么帮助: 我关闭了 Visual Studio 中所有打开的文件选项卡,并再次构建了解决方案。等等,错误消失了。

【讨论】:

【参考方案14】:

对我来说,这个问题并不是 Angular2 特有的,因为我实际上使用的是 polymerTS。使用 Promise polyfill,我无法在我的 Polymer 组件 ts 文件中使用 Promise。我的解决方案是使用以下命令从 NPM 安装 Promise 类型。

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

对我来说,我什至不必在我的 Polymer ts 文件中引用 d.ts 文件。刚刚工作。但是,您可能只需要简单地将位于 es6-promise 目录中的 index.d.ts 文件拖到您尝试调用 Promise 对象的文件中。这将自动为您创建参考。

【讨论】:

【参考方案15】:

在您的 tsconfig.json 中将目标更改为“es6”

"compilerOptions": "target": "es6" 

或者安装TypeScript for Visual Studio 2015也可以解决这个问题,无需修改tsconfig.json

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

【讨论】:

以上是关于构建:找不到名称 Promise - 带有 MVC6 和 Angular 2 的 Visual Studio 2015的主要内容,如果未能解决你的问题,请参考以下文章

Spring MVC 控制器问题:找不到带有 URI 的 HTTP 请求的映射

Ionic 2:更新到 RC.0 后找不到名称“Promise”

带有 Razor 的 MVC3 抛出找不到方法:'System.Object System.Web.Mvc.ControllerBase.get_ViewModel()'

构建 Spring MVC 应用程序,控制器“找不到符号”模型

错误 TS2304:找不到名称“承诺”

错误1找不到类型或命名空间名称“Controller”(您是否缺少using指令或程序集引用?)