使用Angular CLI创建Angular 2项目

本文详细介绍如何通过nvm-windows安装指定版本的Node.js,并配置npm代理,安装@angular/cli,以及使用webstorm创建和启动Angular项目的过程。

一、安装nvm-windows,方便node版本切换


 
  1. nvm list #查看已安装的版本
  2. nvm install 6.11.0 #安装Node.js 6.11.0,因为@angular/cli需要6.9版本以上支持
  3. nvm use 6.11.0 #切换到新安装的版本

二、为npm配置proxy(proxy软件需自行安装)


 
  1. npm config set proxy=http://localhost:1080
  2. npm config set https-proxy=http://localhost:1080

三、安装@angular/cli(正式版)


 
  1. npm install -g @angular/cli

安装完后,查看ng版本(如下图)


 
  1. ng version

四、使用webstorm创建Angular 2项目

1.打开webstorm,选择"create new project"

2.选择Angular CLI,此时会自动侦测并配置刚才安装好的Angular CLI(如下图)

3.点右下角“create”,创建project

4.当Run窗格中出现“Installing packages for tooling via npm ”字样时,需稍等片刻,之后即可successfully created(如下图)

五、启动项目

  1. terminal中输入

 
  1. ng serve
  1. 出现编译成功信息(如下图)

  2. 浏览器地址栏输入:localhost:4200,显示如下图即OK

遇到的问题

1.“You have to be inside an angular-cli project in order to use the serve command”

@angular/cli正式版安装后,依然在使用beta版,故报错(如下图)

查看版本,的确是beta版(如下图)

参考官方升级文档,需卸载之前beta版


 
  1. nvm use 5.12.0 #切换node版本
  2. npm uninstall -g angular-cli # Remove global package
  3. npm uninstall --save-dev angular-cli # Remove from package.json

转载于:https://www.cnblogs.com/enginex/p/7149621.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值