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

本文介绍了在 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

1. {
2. "compilerOptions": {
3. "target": "es5",
4. "module": "commonjs",
5. "moduleResolution": "node",
6. "sourceMap": true,
7. "emitDecoratorMetadata": true,
8. "experimentalDecorators": true,
9. "removeComments": false,
10. "noImplicitAny": true,
11. "suppressImplicitAnyIndexErrors": true
12. },
13. "compileOnSave": true
14. }

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

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

将 index.html 设置为启动页面：在 Solution Explorer 中，右键点击 index.html ，选择选项 Set As Start Page 。

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

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

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

像“ Property map does not exist on type Observable ”和“ 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 的内容。在配置完之前，请暂时删除导航路径，回到首页，再进行刷新。