因为在配置ng2的环境的时候,不想把node安装在默认路径C盘下,所以在安装完node和npm之后,在安装angular-cli的时候会出现偶尔安装不成功,和安装cnpm之后再命令行里输入cnpm install -g @angular/cli出现命令名称无法被识别的错误情况。导致按照官网的步骤也不能启动成功项目。为了避免node安装在D盘(或其他自定义路径下)之后安装@angular/cli和cnpm出现问题,下面步骤作为参考。
一、
搜索node下载,进入node下载地址(可以自行搜索下载地址)
根据自己系统选择对应下载文件,(我电脑是64位win8系统,我选择的是.msi文件64-bit)
然后打开下载下来的文件,按照提示一步步安装,默认是安装在C盘下,但是我选择安装在了 D:\nodejs 路径下
安装完node之后,可以看到在安装目录下生成一堆文件,node安装好后npm也被一起安装了,
按住win键+R键打开运行窗口,输入cmd按回车键打开命令框可以用node -v 和npm -v来检查自己安装的版本(按照官方的说法要越新版本的越好)
二、
配置环境变量
我的电脑-属性-高级系统设置-环境变量-新建
变量名:NODE_PATH
变量值:D:\nodejs\node_modules
(因为我安装在了D盘的nodejs路径下所以路径为D:\nodejs\node_modules)
三、
修改npm的镜像为淘宝镜像
npm config set registry https://registry.npm.taobao.org
也可以在安装node的路径下找到npmrc文件
(我的在D:\nodejs\node_modules\npm下的npmrc文件)
打开之后添加 registry https://registry.npm.taobao.org 到文件中
//顺便提一下
如果不愿意修改npm的镜像就安装cnpm
npm install -g cnpm
cnpm -v (查看版本)
可以用cnpm来进行安装@angular/cli
(cnpm也是淘宝的镜像 ,如果想用cnpm的话,后面安装只需要把npm install 都改为cnpm install )
四、
安装@angular/cli
npm install -g @angular/cli
安装完之后
ng -v (每次安装完之后都查看一下版本,既可以验证是否成功安装,也可以知道自己安装的版本),成功之后如下所示
五、
到此为止ng2所需要的启动环境已经安装好,就开始创建项目。
切换到要创建项目的目录下,(如上图所示,我创建新项目的路径为D:\tools\angular2-quanweizhinan)
创建新项目(接下来就可以按照官网步骤来进行)
ng new my-app
创建成功可以看到my-app这个文件
cd my-app
ng serve --open
(如果不出意外项目到此步骤已经成功打开)
六、
进入文件找到package.json打开,添加--open --prod --aot
--open可以帮你自动打开浏览器 --prod --aot 可以压缩文件打开速度变快
如果按照上图配置好之后用命令
npm start
就可以实现压缩文件,打开浏览器
可看到下图压缩之后和没有压缩的对比,很明显就可以看出来,添加 --prod --aot之后的文件size都比原来小了很多
顺便提一下package.json里面的其他属性如下图所示