使用 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<Response>" 和 "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的更多相关文章

  1. 关于VS2015 ASP.NET MVC添加控制器的时候报错

    调试环境:VS2015 数据库Mysql  WIN10 在调试过程中出现类似下两图的同学们,注意啦. 其实也是在学习的过程中遇到这个问题的,找了很多资料都没有正面的解决添加控制器的时候报错的问题,还是 ...

  2. VS2015墙内创建ionic2 【利用nrm更换源,完美!】

    STEP 1 设置cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org   一句话建立cnpm STEP 2 安装nr ...

  3. VS2015 Git 源码管理工具简单入门

    1.VS Git插件 1.1 环境 VS2015+GitLab 1.2 Git操作过程图解 1.3 常见名词解释 拉取(Pull):将远程版本库合并到本地版本库,相当于(Fetch+Meger) 获取 ...

  4. 关于VS2015支持编译Linux程序的问题

    现状 目前已经发布的VS2015中包括VS2015 Preview 以及 VS2015 CTP6,这两个版本均不支持直接编译C++代码为Linux程序,具体情况可以参考 Visual Studio 2 ...

  5. VS2015企业版本(安装包+key)+ .NET Reflector 9.0

    Reflector9.0系下载:https://yunpan.cn/cMQj9zWbffSqy  访问密码 55eb VS2015中文企业版: http://pan.baidu.com/s/1eRIo ...

  6. VS2015企业版,社区版,专业版详细对比

    VS2015 微软出了3个大版本,其实在前天晚上就放出了三个版本的对比说明.,但是昨天挂掉了..今天特意去看了..截取了自己觉得比较重要的分享一下. 首先我们最常用的 诊断调试工具 其次测试工具(区别 ...

  7. Win10 UWP开发系列:使用VS2015 Update2+ionic开发第一个Cordova App

    安装VS2015 Update2的过程是非常曲折的.还好经过不懈的努力,终于折腾成功了. 如果开发Cordova项目的话,推荐大家用一下ionic这个框架,效果还不错.对于Cordova.PhoneG ...

  8. VS2015 Update2中有关cordova和xamarin安装的问题

    最近VS2015出了Update2,当然是第一时间进行了安装,中间过程曲折,反复安装卸载n次,也算是获得了一定的安装经验值.现在说一下经常出的问题. Update2里最吸引人的当然是跨平台开发的部分, ...

  9. VS2010 VS2012 VS2013 VS2015启动调试时老是提示正在下载公共符号

    VS2010 VS2012 VS2013 VS2015启动调试时老是提示正在下载公共符号,下载一些.dll文件,点取消后也能继续调试,但特别慢.解决方法:工具-选项,或者调试-选项和设置,将调试下的& ...

随机推荐

  1. 在linux中使用cmake编译运行cocos2d-x 3.4 projects

    原因: 由于不想在真机环境和 ide中调试环境, 只想在linux端进行 调试和运行, 需要使用cmake对现有的游戏进行编译(cocos2dx-lua 3.4) 修改步骤: 1.修改framewor ...

  2. 《JavaScript DOM编程艺术》读后总结

    这是我读的第一本关于JS的书,刚开始我为了选择合适的学习JS的书,看了网上许多人的意见,基本上都是推荐先读这本书.书的内容挺简单的,确实很适合初学者看,阅读的过程中不会产生什么障碍.内容虽然简单,但我 ...

  3. 详解java方法的重载

    1.方法的重载: 方法名相同,参数列表不同就叫做方法的重载.

  4. 什么是Ajax

    AJAX不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术. 使用Javascript向服务器提出请求并处理响应而不阻塞用户!核心对象XMLHTTPRequest.通过 ...

  5. AutoLearnSkills.lua --升级自动学习技能

    --[[作者信息: Auto Learn SKills (升级自动学习技能) 作者QQ:247321453 作者Email:247321453@qq.com 修改日期:2014-3-12 功能:在玩家 ...

  6. [原创]cocos2d-x研习录-第三阶 背景音乐和音效

    在游戏中,音效是一个不可或缺的部分,它可以为我们的游戏增加效果.音效在游戏中一般分为长时间的背景音乐和短促的特效音乐.Cocos2D-x支持多种常见音乐格式(mp3.wav等). Cocos2D-x提 ...

  7. 路由 - ASP.NET MVC 4 系列

           软件开发人员常常对一些细小的细节问题倍加关注,由其在考虑源代码的质量和结构时更是如此.因此,当遇到大部分使用 ASP.NET 技术构建的站点,使用如下的 URL 地址时,可能会有些奇怪: ...

  8. mysql 5.7修改密码

    关闭正在运行的 MySQL : [root@www.woai.it ~]# service mysql stop 运行 [root@www.woai.it ~]# mysqld_safe --skip ...

  9. Centos 6.5安装oracle 11g

    (添加host)一.Centos 6.5 安装图形界面 gnome # yum groupinstall "Desktop" # yum groupinstall "X ...

  10. 【转】怎么让VS2015编写的程序在XP中顺利运行

    1. 概述 默认配置下VS2015编写的应用程序只能在Win8/Win10上运行.但幸好还保留了生成XP程序的设置项.XP和Win2003的用户还是大量存在的,我们程序软件的发布不能不考虑他们.另外X ...