如何在使用TypeScript的Visual Studio 2015中使用angular2？

Question

我试图让Angular 2在工作Visual Studio 2015与Typescript.我想尝试在MVC 5类型Web项目(web.config而不是config.json)中使用最基本的示例:

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

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

我正在尝试使这项工作所需的最小的东西.所以我下载了最新的Angular 2(alpha .45)并复制了TypeScript下载modules文件夹中的所有内容.包括所有子文件夹(减去了docs和examples人.)

我确信这将在Visual Studio我之前完成之前工作,但是我试图让它工作Visual Studio,它给了我超过3,000个错误,看起来是因为我错过了其他模块或其他东西.

以下是我遗漏的几件事:

地图(default_keyvalue_differ.ts和许多其他人):

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

assert(lexer.ts):

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

设置(command_compiler.ts):

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

startsWith(shadow_css.ts)

rule.selector.startsWith('@page')

require(parse5_adapter.ts)

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

@ reactivex/rxjs/dist/cjs/Rx(async.ts)

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

还有更多.所以我的第一个问题是,我真的需要所有这些东西,还是其中一些不需要.第二,更重要的是,我如何Visual Studio构建我的解决方案？

注意:我认为这个"非常长的示例/教程"是我正在寻找的,除了它适用于MVC 6(.NET Core)而不是MVC 5:http://chsakell.com/2016/01/01/cross-平台的单页的应用程序与- ASP-净-5-角度-2-打字稿/

Answer 1

我想您npm使用Visual Studio 2015的旧版本存在问题.我建议您打开Visual Studio的"输出"窗口,然后从"Bower/npm"中选择"显示输出".您将看到如下图所示的内容:

输出中输入最多的线很长并且被切断.我包括它separetels:

错误的ERR!命令"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)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External目录中.Angular2有依赖包reactivex/rxjs,这些都需要"npm":"~2.0.0",但Visual Studio使用旧1.4.9版本,而不是(你可以验证version的"C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\npm\node_modules\npm\package.json").即使您安装最新版本的Nodejs和npm也无济于事,因为Visual Studio 2015将使用相同的旧版本npm.

要解决此问题,我建议您执行以下操作:

• 安装最新版本的NodeJs.您可以从https://nodejs.org/en/下载.如果您更喜欢使用x64版本,那么我建议您验证是否已经安装了x86 C:\Program Files (x86)\nodejs.如果存在x86-version,则在开始安装x64-version之前将其卸载.之后,您可以安装Nodejs.今天它将是NodeJs 5.0.0 node-v5.0.0-x64.msi.
• 然后你可以在管理模式下启动命令提示符(它不是mandotory)并用于npm update -g更新npm或npm install -g npm@latest用于安装最新版本.我建议您npm -v在安装之前和之后使用以验证是否安装了最新版本.今天它的版本是3.3.12.根据您的安装/更新方式,npm您可以将其安装C:\Program Files\nodejs\node_modules\npm在%AppData%\npm(C:\Users\Oleg\AppData\Roaming\npm例如,直接)或两个目的地中.
• 你应该在管理员权限下启动文本编辑器(开始菜单,搜索,键入notepad.exe例如,然后按Ctrl+Shift+Enter).之后,您应该修改文件C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\npm.cmd并将内容设置为@"C:\Program Files\nodejs\node.exe" "%AppData%\npm\node_modules\npm\bin\npm-cli.js" %*或者@"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"in "devDependencies"或"dependencies"section 这样的条目 ,安装就会成功.你可能会看到像这样的警告

因为你现在使用的"太好"版本npm:版本3.3.12而不是某些2.x.x版本(基于"npm":"~2.0.0"依赖包的规则reactivex/rxjs).

PS如果您使用MVC5而不是MVC6的预发布版本(ASP.NET 5),可能还有其他错误消息,但主要问题是相同的.您必须安装新版本的node和npm并修改C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\npm.cmd以使用新版本的npm.

Answer 2

我知道 SO 并不热衷于粘贴内容的链接，但这是一个相当大的教程，只需将粘贴复制到此处......并且它的所有部分都与回答问题相关。无论如何，这是 Angular 2 团队提供的让 NG2 在 Visual Studio MVC 5 中工作的教程：

https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html