这里不讲Angular2的开发
但是会介绍两种搭建Angular2开发环境的方式,虽说是两种方式,但是都是借助了@angular/cli(angular-cli)。不同的是,一个是手动方式,一个是开发工具自动搭建。这里的开发工具用的WebStorm。
环境配置要求
Angular2需要用到node.js 和 npm 。到nodejs官网下载最新版(LTS)即可,安装完nodejs,npm也可以使用了。npm是一个NodeJs包管理和分发工具。
安装完毕:可查看node和npm的版本
node -v
npm -v
然后安装 @angular/cli(angular-cli)。
angular-cli最新的名字改成了 @angular/cli
npm install -g @angular/cli
由于“墙”问题,使用npm下载东西可能很慢,可以先安装淘宝维护的国内镜像。
npm install -g cnpm
cnpm install -g @angular/cli
等待安装完毕。。。。。
查看版本 ng -v
下面介绍两种搭建方式
第一种:手动方式
进入要增加项目的目录比如,我要在F盘的Angular2文件夹下,创建一个名为“hello-angular”的项目。则命令行进入Angular2
执行:ng new hello-angular 等待安装完毕(时间可能会比较长 Installing packages for tooling via npm.)
出现Project 'hello-angular' successfully created. 即安装成功。
执行:ng serve
出现Compiled successfully。启动成功。输入网址:localhost:4200 即可看到一个最简单的Angular2.
我在搭建过程中遇到了一个问题
在new这个项目的时候,在Installing packages for tooling via npm.这个地方等了很久,然后报 error Windows_NT 6.1.7601这个问题。不知道这个是什么问题,执行了这个npm install -g n --force 解决了问题。
在new 这个项目时,执行到Installing packages for tooling via npm.这个地方时,这个项目的基本结构就已经搭建好了。
只是少了依赖包 (项目文件夹下的 node_modules 文件夹)。在package.json文件中,会有包的引用。
如果在这一步Installing packages for tooling via npm很长时间,可以关闭执行 Ctrl+c(两次)。
这个时候ng serve是无法启动的,会提示你先安装的。
使用npm install安装,这个过程也会根据package.json文件中的引用,去下载相关依赖包。
等安装完,ng serve或者 npm start 。localhost:4200 即可启动。
第二种:WebStorm自动搭建
安装WebStorm,打开。
create new project
如果安装了nodejs和angular/cli 会自动检测到。然后点create。
等待安装,下部提示和在命令行中相同。
完毕。启动项目还是需要到命令行中去ng server。
是不是可以配置webstorm从webstorm启动呢?