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" 和 "Observable cannot be found" ，这意味着你使用老版本的 Visual Studio，可以参考这里。

你应该替换这个文件 

c:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript.typescriptServices.js， 这将需要管理员权限。

 

参考资料

 

Visual Studio 2015 Quick Start