1. 安装node
官网地址:http://nodejs.cn/
安装完成后,在命令行工具输入 node –v 可验证是否安装成功
2. 配置淘宝镜像源
从国外服务器下载ng4和依赖包很慢,通过配置淘宝镜像源可以提高下载速度。
打开命令行工具输入:
npm config set registry https://registry.npm.taobao.org
配置完成后可通过npm config get registry验证是否配置成功
3. 安装cnpm
个别插件(比如node-sass)即使用淘宝镜像源也无法正常下载,需要用cnpm工具。
(cnpm仅在无法安装时才使用,正常均使用npm,否则会有意想不到的bug)
打开命令行工具输入:
npm install -g cnpm
安装完成后可通过cnpm -v验证是否安装成功
4. 安装angular4脚手架工具
打开命令行工具输入:
npm install –g @angular/cli
安装完成后可通过ng -v验证是否安装成功
5. 安装项目依赖包
命令行工具进入项目根目录,输入:
npm install
该过程会较慢。一般情况下node-sass 会安装失败,这时用cnpm单独安装node-sass :
cnpm install node-sass
6. 启动项目
命令行工具进入项目根目录,输入:
npm start //或者 ng serve
7. 配置chrome浏览器,解决跨域
若项目服务器地址非本机,需要解决跨域问题,在本机启动服务的可跳过。
项目服务器地址可在项目目录下的 src/ environments/ environment.ts 查看和修改。
步骤:
1) 在电脑上新建目录,例如:D:\MyChromeDevUserData;
2) 右击chrome浏览器快捷方式,打开属性页面,在目标输入框的最后加上
--disable-web-security --user-data-dir=D:\MyChromeDevUserData
–user-data-dir的值就是刚才的目录,注意在–disable前面有一个空格
8. 打开页面
打开配置好的chrome快捷方式,项目访问地址为
localhost:4200