我怎样才能angular2在Visual Studio 2015年打字稿工作？ [英] How can I get angular2 to work in Visual Studio 2015 with TypeScript?

问题描述

我试图让角2 在的Visual Studio 2015 与打字稿工作。我试图获得最基本的例子在 MVC 5 键入Web项目（的web.config 而不是工作 config.json ）

I am trying to get Angular 2 to work in Visual Studio 2015 with Typescript. I am trying to get the most basic example to work in an MVC 5 type web project (web.config instead of config.json):

import {Component, bootstrap} from 'angular2/angular2';

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
class AppComponent { }
bootstrap(AppComponent);

我试图使这项工作所需要的最起码的事情。于是我下载了最新的2角（阿尔法0.45），并复制所有的打字稿在下载模块夹。包括所有的子文件夹（减去的文档和例子的。）

I'm trying the most minimal things needed to make this work. So I downloaded the most recent Angular 2 (alpha .45) and copied over all of the TypeScript in the downloaded modules folder. Including all of the subfolders (minus the docs and examples ones.)

我敢肯定，这将工作以外的的Visual Studio 因为我以前做过，但我想获得它在工作Visual Studio中，这是给我3000错误，它看起来是因为我缺少的其它模块或东西。

I am sure that this will work outside of Visual Studio as I have done this before, but I am trying to get it to work in Visual Studio and it is giving me over 3,000 errors and it looks like it is because I am missing other modules or something.

下面是几个我失踪的事情：

Here are a couple of the things I am missing:

地图（ default_keyvalue_differ.ts ，和许多其他人）：

Map (default_keyvalue_differ.ts, and many others):

export class DefaultKeyValueDiffer implements KeyValueDiffer {
  private _records: Map<any, any> = new Map();

断言（ lexer.ts ）

  scanCharacter(start: number, code: number): Token {
    assert(this.peek == code);

设置（command_compiler.ts）：

Set (command_compiler.ts):

function removeKeyValueArrayDuplicates(keyValueArray: string[]): string[] {
  var knownPairs = new Set();

startsWith （shadow_css.ts）

startsWith (shadow_css.ts)

rule.selector.startsWith('@page')

要求（parse5_adapter.ts）

require (parse5_adapter.ts)

var parse5 = require('parse5/index');

@ reactivex / rxjs /距离/ CJS /接收（async.ts）

export {Subject} from '@reactivex/rxjs/dist/cjs/Rx';

有比这更多。所以我的第一个问题是，我真的需要这一切东西，或者是一些它不是必需的。第二，更重要的是，我如何获得的Visual Studio 来建立我的解决方案？

There is much more than this. So my 1st question is, do I really need all of this stuff, or is some of it not required. 2nd and more importantly, how do I get Visual Studio to build my solution?

推荐答案

我想你有旧 NPM 版本，它使用的Visual Studio 2015的问题，我建议你Visual Studio中打开输出窗口，并选择鲍尔/故宫显示输出。你会看到类似下面的图片：

I suppose you have the problem with old npm version which uses Visual Studio 2015. I recommend you to open Output window of Visual Studio and to choose Show output from "Bower/npm". You will see something like on the picture below:

输出的最导入线长，它的切割。我包括它separetels：

The most imported line of the output is long and it's cut. I include it separetels:

NPM ERR！命令C：\\ Program Files文件（x86）的\\微软的Visual Studio
  14.0 \\ Common7 \\ IDE \\扩展\\微软\\网络工具\\外部\\\\节点\\节点C：\\ Program Files文件（x86）的\\微软
  的Visual Studio 14.0 \\ Common7 \\ IDE \\扩展\\微软\\ WEB
  工具\\外部\\故宫\\ node_modules \\故宫\\ BIN \\ NPM-cli.js安装

npm ERR! command "C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\\node\node" "C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\npm\node_modules\npm\bin\npm-cli.js" "install"

在换句话说，要明白的Visual Studio 2015使用一些工具包是很重要的 NPM 从 C：\\ Program Files文件（x86）的\\微软的Visual Studio 14.0 \\ Common7 \\ IDE \\扩展\\微软\\网络工具\\外部目录。 Angular2有依赖包 reactivex / rxjs ，要求故宫：〜2.0.0，但Visual Studio中使用旧 1.4.9 版本而不是（您可以验证的C的版本：\\程序文件（x86）\\微软的Visual Studio 14.0 \\ Common7 \\ IDE \\扩展\\微软\\网络工具\\外部\\故宫\\ node_modules \\故宫\\的package.json）。即使你安装最新版本的的NodeJS和NPM这将不利于原因是Visual Studio 2015年将使用相同​​的旧版本的 NPM 。

In other words, it's important to understand that Visual Studio 2015 uses some tools inclusive npm from C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External directory. Angular2 have dependency package reactivex/rxjs, which require "npm":"~2.0.0", but Visual Studio uses old 1.4.9 version instead (you can verify the version of "C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\npm\node_modules\npm\package.json"). Even if you would install the latest version of Nodejs and npm it will not help because Visual Studio 2015 will use the same old version of npm.

要解决，我建议你做如下的问题：

To fix the problem I suggest you to do the following:

• 安装最新版本的的NodeJS。您可以从 https://nodejs.org/en/ 下载。如果您想preFER使用x64的版本，那么我建议您确认您已经在安装的x86 C：\\ Program Files文件（x86）的\\的NodeJS 。如果x86版本存在，那么在开始安装的x64版本前卸载它。之后，你可以安装的NodeJS。今天，这将是5.0.0的NodeJS从节点V5.0.0-x64.msi 。


• 那么您可以在管理员模式启动命令提示符（这不是mandotory），并使用 NPM更新-g 更新 NPM 或使用 NPM安装-g NPM @最新来安装最新版本。我建议你​​使用 NPM -v 前和安装后验证您安装最新版本。今天，它是3.3.12版本。取决于你如何安装/更新 NPM 你可以把它安装无论是在 C：\\ Program Files文件\\的NodeJS \\ node_modules \\ NPM 或％APPDATA％\\ NPM （该diretcory C：\\用户\\奥列格\\应用程序数据\\漫游\\ NPM 例如），或在两地。


• 您应该开始菜单，搜索，键入的notepad.exe 例如和preSS <大骨节病>按Ctrl + Shift下管理员权限的文本编辑器（开始+ Enter键< /骨节病>）。之后，你应该修改文件 C：\\ Program Files文件（x86）的\\微软的Visual Studio 14.0 \\ Common7 \\ IDE \\扩展\\微软\\网络工具\\外部\\ npm.cmd 并设置为内容类似 @C：\\ Program Files文件\\的NodeJS \\ node.exe％APPDATA％\\故宫\\ node_modules \\故宫\\ BIN \\ NPM-cli.js％* 或 @C：\\ Program Files文件\\的NodeJS \\ node.exeC：\\ Program Files文件\\的NodeJS \\ node_modules \\故宫\\ BIN \\ NPM-cli.js％*

• install the latest version of NodeJs. You can download it from https://nodejs.org/en/. If you would prefer to use x64-version then I recommend you to verify that you have already installed x86 in C:\Program Files (x86)\nodejs. If x86-version exist, then uninstall it before starting installation of x64-version. After that you can install Nodejs. Today it would be NodeJs 5.0.0 from node-v5.0.0-x64.msi.
• then you can start Command Prompt in admin mode (it's not mandotory) and use npm update -g to update npm or to use npm install -g npm@latest to install the latest version. I recommend you to use npm -v before and after the installation to verify that you install the latest version. Today it's version 3.3.12. Depend on how you installed/updated npm you can have it installed either in C:\Program Files\nodejs\node_modules\npm or in %AppData%\npm (the diretcory C:\Users\Oleg\AppData\Roaming\npm for example) or in both destinations.
• you should start text editor under administrator rights (Start menu, searching, type notepad.exe for example and press Ctrl+Shift+Enter). After that you should modify the file C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\npm.cmd and set as the content something like @"C:\Program Files\nodejs\node.exe" "%AppData%\npm\node_modules\npm\bin\npm-cli.js" %* or @"C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" %*

之后，你可以只保存的package.json 有像angular2条目：^ 2.0.0-alpha.45在devDependencies或依赖部分和installetion一定会成功。你可能会看到，就像

After that you can just save package.json having the entry like "angular2": "^2.0.0-alpha.45" in "devDependencies" or "dependencies" section and the installetion will be successful. You will probably see just the warning like

因为你现在用的好 NPM 的版本：版本3.3.12，而不是某些 2.xx的版本（根据规则故宫：〜2.0.0 reactivex / rxjs ）。

because you use now "too good" version of npm: the version 3.3.12 instead of some 2.x.x version (based on the rule "npm":"~2.0.0" of the dependency package reactivex/rxjs).

P.S。也许你有，如果你使用MVC5代替MVC6（ASP.NET 5）$ P $租赁前的版本一些其他错误传递消息，但主要问题是一样的。你必须安装节点和NPM的新版本，并修改 C：\\ Program Files文件（x86）的\\微软的Visual Studio 14.0 \\ Common7 \\ IDE \\扩展\\微软\\网络工具\\外部\\ npm.cmd 来使用NPM的新版本。

P.S. Probably you have some other error messaged if you use MVC5 instead of prerelease version of MVC6 (ASP.NET 5), but the main problem is the same. You have to install new version of node and npm and modify C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\npm.cmd to use the new version of npm.

这篇关于我怎样才能angular2在Visual Studio 2015年打字稿工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！