angular4项目启动步骤

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

猜你喜欢

转载自blog.csdn.net/shengandshu/article/details/78603074
今日推荐