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 进行搜索。

Angualr2 - 使用 VS2015_第1张图片

 选择当前最新的版本。

下载并安装。

第三步,创建 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

你可能感兴趣的:(Angualr2 - 使用 VS2015)