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

   
   
{
  "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 的内容。在配置完之前，请暂时删除导航路径，回到首页，再进行刷新。