Angualr2 - 使用 VS2015
使用 Vs 2015 快速上手 Angular2
许多程序员希望能够使用 VS2015 作为 IDE 来开发 Angular 2 应用，这里介绍如何设置 VS2015，使用快速上手文件来搭建 ASP.NET 4.x 项目。
这里介绍的内容来自 Angular 2 官网，项目使用 System.js 来加载 Angular 2,没有使用打包工具来进行打包，所以，在运行时的页面中会存在多个脚本引用。我们还可以使用打包工具打包，来使用 Angular 2.
ASP.NET 4.x Project
搭建的步骤如下所示:
- Prerequisite: 安装 Node.js
- Step 1: 下载快速上手文件
- Step 2: 设置 Visual Studio 中的 TypeScript
- Step 3: 创建 Visual Studio ASP.NET 项目
- Step 4: 将快速上手文件复制到 ASP.NET 项目文件夹
- Step 5: 恢复需要的包文件
- Step 6: 编辑 TypeScript 配置文件
- Step 7: 编译和运行
前置条件
如果你的机器上还没有安装 Node.Js，首先安装 Node 和 NPM
打开终端窗口，分别使用 node -v 和 npm -v 命令来检查你的 node 和 npm 版本。
确认 node 的版本是 4.4.x - 5.x.x 和 3.x.x
第一步，下载快速启动文件
从 Github 下载 Quick Start 文件, 也可以直接从这里下载压缩包，如果是 zip 文件，解压它。
第二步，设置 Visual Studio 中的 TypeScript
打开 Tools -> Extensions and Updates
在窗口左边的树中选择 Online
在右上角的搜索窗口中输入 Typescript 进行搜索。
选择当前最新的版本。
下载并安装。
第三步，创建 Visual Studio 项目
如下创建 ASP.NET 4.x 项目
- 在 Visual Studio 中，选择 File -> New -> Project
- 在模板树中，选择 Templates -> Visual C# -> Web
- 选择 ASP.NET Web Application 模板，提供项目名称，点击 Ok
- 选择希望 ASP.NET 4.5.2 作为模板
在这个说明中，我们选择 Empty 作为模板，没有额外的文件夹，没有验证和寄宿的配置。
第四步，复制 Quick Start 文件到 ASP.NET 项目文件夹中
复制我们下载的文件到包含 .csproj 文件的文件夹中。
点击解决方案管理器上方的显示所有文件按钮，这样可以看到所有的文件。
在列出的文件和文件夹上右键，选择 Include in Project 来将文件和文件夹包含到项目中，最低限度，必须包含下列文件
- app folder (answer No if asked to search for TypeScript Typings)
- styles.css
- index.html
- package.json
- tsconfig.json
第五步，下载依赖包
这一步需要联网。下载 Angular2 所依赖的包。
- 在 package.json 文件上右键，选择 Restore Packages。这里使用 npm 来安装所有定义在 package.json 文件中的包，这会需要一点时间。
- 如果期望的话，可以打开输出窗口 ( View -> Output ) 来监控 npm 命令的执行过程。
- 忽略警告信息
- 当处理完成之后，会看到一条消息：npm command completed with exit code 0
- 点击解决方案管理器上部的 Refresh 按钮，以便更新文件的显示内容。
- 不要将 node_modules 文件夹包含到项目中，继续在项目中隐藏。
@angular/complier is not int the npm registry 信息是由于 Visual Studio 2015 使用了旧版本的 npm，更新到最新版本。
- Tools -> Options 打开选项对话框。
- 在左边的树中，选择 Projects and Solutions -> External Web Tools
- 在右边，将 $(PATH) 移到 $(DevEnvDir) 之上，这一步告诉 Visual Studio 优先使用外部工具而不是内置工具
- 点击 Ok 关闭对话框
- 重新启动 Visual Studio
第六步，编辑 Typescript 配置文件
在 TypeScript 配置文件 tsconfig.Json 文件中，为 VS 2015 添加一行 ComplieOnSave: true 的配置。
{ "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": true, "suppressImplicitAnyIndexErrors": true, "typeRoots": [ "node_modules/@types" ] }, "compileOnSave": true }
完成之后，退出 Visual Studio，重新加载项目。
第七步，编译运行
将 index.html 设置为项目的起始页面，右键 index.html，选择 Set As Start Page.
点击运行按钮，或者 F5 键，编译运行项目。
这将使用默认浏览器运行项目。
试着修改一些内容，保存并刷新浏览器来检查你的修改。
可能有一些编译错误，比如："Property map does not exist on type Observable<Response>" 和 "Observable cannot be found" ，这意味着你使用老版本的 Visual Studio，可以参考这里。
你应该替换这个文件
c:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript.typescriptServices.js， 这将需要管理员权限。
参考资料
