Visual Studio 2015，Angular2进行开发快速入门

原文出处：http://blog.csdn.net/feiying008/article/details/52996016

本文介绍了在
Visual Studio 2015 的 ASP.NET 4.x 项目中，用 Angular 实现“快速起步”所需的步骤。

ASP.Net 4.x
项目

在 Visual Studio 的 ASP.NET 4.x 项目中实现“快速起步”的步骤如下：

前提条件 : 安装 Node.js

第一步 : 下载“快速起步”的文件

第二步 : 设置 Visual Studio ，以支持 TypeScript

第三步 : 创建 Visual Studio ASP.NET 项目

第四步 : 把“快速起步”中的文件拷贝到 ASP.NET 的项目目录中

第五步 : 恢复需要的包

第六步 : 编辑 TypeScript 配置文件

第七步 : 构建和运行应用程序

前提条件 : Node.js

如果你的电脑里没有 Node.js® 和 npm ，请安装 它们 。

在终端或者控制台中运行 

node
-v

 和 

npm
-v

 ， 请确认你的 Node 版本为 

4.4.x

 - 

5.x.x

 ，
npm 的版本为 

3.x.x

 。老版本会引起错误。

第一步 : 现在“快速起步”文件

从 github 下载“快速起步”的源代码 。如果下载的是一个压缩的 zip 文件，解压它。

第二步：设置 Visual Studio ，以支持 TypeScript

确保你的 Visual Studio 2015 是最新版本，然后打开 Visual Studio 并安装最新的 TypeScript 工具：

打开 

Tools

 | 

Extensions
and Updates

 。

在左侧目录树中选择 

Online

 。

在右上角的搜索框中搜 

TypeScript

 。

选择最新版本的 TypeScript 。

下载并安装依赖包。

第三步 : 创建 Visual Studio ASP.NET 项目

按照下面的步骤创建 ASP.NET 4.x 项目 :

在 Visual Studio 中，选择 

File

 | 

New

 | 

Project

 菜单。

在模板树中，选择 

Templates

 | 

Visual
C#

( 或 

Visual
Basic

) | 

Web

 菜单。

选择 

ASP.NET
Web Application

 模板，输入项目名，点击“ OK ”按钮。

选择自己喜欢的 ASP.NET 4.5.2 模板，点击 OK 。

本烹饪宝典选择了 

Empty

 模板，它没有添加过任何目录，没有身份验证，没有服务器托管。为你的项目选择合适的模板和选项。

第四步 : 拷贝“快速起步”的文件到 ASP.NET 项目所在的目录

拷贝从 github 下载的“快速起步”文件到包含 

.csproj

 文件的目录中。按照下面的步骤把它们加到
Visual Studio 中：

在 Solution Explorer 中点击 

Show
All Files

 按钮，显示项目中所有隐藏文件。

右键点击每个目录和文件，选择 

Include
in Project

 。 最少要添加下列文件：

app 目录（如果询问是否要搜索 TypeScript 类型，回答 No ）

styles.css

index.html

package.json

tsconfig.json

typings.json

第五步 : 恢复需要的包

按下面的步骤恢复 Angular 应用程序需要的包：

在 Solution Explorer 中右键点击 

package.json

 ，选择 

Restore
Packages

 。 

这样， Visual Studio 会使用 

npm

 来安装在 

package.json

 中定义的所有包
. 这可能需要花一点时间。

如果愿意，打开 Output 窗口 (

View

 | 

Output

)
来监控 npm 命令的执行情况。

忽略所有警告。

当恢复完成后，将会出现一条消息： 

npm
command completed with exit code 0

.

在 Solution Explorer 里，点击 

Refresh

 图标。

不要 将 

node_modules

 目录添加到项目中，让它隐藏。

"@angular/compiler is not in the npm registry" 这个错误表明 Visual Studio 2015 使用了老版本的 npm 。按照下面的步骤安装最新版本的 npm ：

Tools

 | 

Options

 来打开“选项”对话框。

在左侧的树状目录中，选择 

Projects
and Solutions

 | 

External
Web Tools

 。

在右侧，把 

$(PATH)

 项移动到 

$(DevEnvDir

)
上面，这样就会告诉 Visual Studio 优先在你的路径中查找外来工具（比如 npm ）。

点击 OK ，关闭对话框。

重新启动 Visual Studio 来让这些修改生效。

第六步：编辑 TypeScript 配置文件

在 Visual Studio 2015 里，必须在 TypeScript 的配置文件 (

tsconfig.json

)
中添加 

"compileOnSave":
true

 ：

tsconfig.json (scripts)

COPY CODE

{

"compilerOptions": {

"target": "es5",

"module": "commonjs",

"moduleResolution": "node",

"sourceMap": true,

"emitDecoratorMetadata": true,

"experimentalDecorators": true,

"removeComments": false,

"noImplicitAny": true,

"suppressImplicitAnyIndexErrors": true

},

"compileOnSave": true

}

修改上面的设置后， 退出 Visual Studio ，再打开它并加载项目。

第七步：编译和运行应用程序

将 index.html 设置为启动页面：在 Solution Explorer 中，右键点击 

index.html

 ，选择选项 

Set
As Start Page

 。

点击“运行”按钮或按 F5 键来编译和运行应用程序。

这样会启动默认浏览器并在里面运行“快速起步”范例程序。

尝试编辑任何项目文件， 保存 并刷新浏览器来查看效果。

像“ Property 

map

 does
not exist on type 

Observable<Response>

 ”和“ Observable
cannot be found ”这样的编译错误 说明 Visual Studio 的版本太老了。退出 Visual Studio ，按照 这里的指南 升级
Visual Studio 。

它会问你是否要覆盖文件。

COPY CODE

c:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript.typescriptServices.js

这个操作需要管理员权限。

应用程序的路由

如果这个应用程序使用了 Angular 路由器，刷新浏览器时可能会返回一个 404 - Page Not Found 。查看一下地址栏，它是否包含一个导航 url （“深链接”）？ 我们必须配置服务器，让它为这些请求直接返回 

index.html

 的内容。在配置完之前，请暂时删除导航路径，回到首页，再进行刷新。