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

angular4项目启动步骤相关推荐

Vue——Windows 10下Vue项目启动步骤[vue-cli-service启动版本]
基本概念 vue-cli:A simple CLI for scaffolding Vue.js projects. 一个简单的Vue.js工程命令行脚手架工具. 官网:https://cli.vue ...
windows下vue项目启动步骤
原创,转载请标注引用地址,谢谢~ 前后端分离项目,要做前后端联动测试,没整过前端用vue, nodejs和webpack的开发管理方式.来回折腾终于把已经建好的vue项目启动起来,做个笔记记录下步骤备 ...
uniapp微信小程序项目启动步骤
如何创建项目就不说了,可以参考该链接: 如何创建开发uniapp微信小程序项目?链接: link 这里主要记录的是,从代码仓库拉取到本地后, 本地启动运行项目,遇到的问题. 1.下载项目使用git ...
Angular项目启动步骤
最近参与公司的一个app项目,前端使用的 angularJs,首次接触这样的项目,一脸懵逼,启动项目都成问题.同事大致讲了一下,自己琢磨一番,项目总算是启动了,如下记录. 先得从 SVN上下载项目源码 ...
3步让你轻松解决项目管理--项目启动、推进和复盘步骤详解
在实际工作中,作为管理者,除了要掌握超强的业务能力,还需要能够具备"推项目.拉团队"的能力.这里我们来探讨如何系统性进行团队的项目管理. 在项目管理中的三个关键动作即启动.推进.复 ...
react项目开发步骤_成为专业React开发人员的31个步骤
react项目开发步骤我为达到可雇用水平而进行的每个项目和课程. (Every single project and course I took to reach a hireable level. ...
idea 执行java maven,IDEA的run maven方式启动步骤详解
安装jetty插件 1. 找到Plugins,查找jetty插件,安装"IDEA Jetty Runner",安装好后重启IDEA 安装插件:Maven Helper 方法同Jet ...
java启动时执行_java怎么实现项目启动时执行指定方法
本文实例为大家共享了java项目启动时执行指定方法,供大家参考,详细内容如下想到的就是监听步骤如下: 1.配置web.xml com.listener.InitListener 2.编写InitLi ...
infor wms 项目启动_广汽本田增城工厂No.2L WMS项目正式启动
Warehouse 导读:近日,在生管科No.2L办公室,广汽本田增城工厂No.2L WMS项目启动大会如期召开.生产管理科,IT科,FNL以及汉得信息有限公司的WMS项目组成员参加了本次启动大会. ...

angular4项目启动步骤

angular4项目启动步骤相关推荐

最新文章

热门文章