一、环境搭建
感觉安装配置比较繁琐,从菜鸟网络看文档,先要安装node.js,最新版的的node.js集成npm,然后使用淘宝的npm镜像,再安装脚手架,似乎这个流程很简单,但是我在查找资料的时候,资料上写了一大堆,也没有整合到一起。所以自己装备写一个简明版的安装流程博客啦。
-
安装node.Js
下载地址:http://nodejs.cn/download/
安装 angular 的计算机上面必须安装最新的 nodejs。
检查安装是否成功:
打开cmd命令窗口输入命令:node --version;如图
-
安装cnpm
新版的nodejs已经集成了npm,所以npm已经顺带安装好了。因为npm 官网镜像国内访问太慢,所以使用淘宝的npm镜像会快些。之后能用到 npm的时候尽量都用cnpm来代替。
Cmd窗口安装命令:
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装angular脚手架
Cmd窗口安装命令:cnpm install -g @angular/cli
查看angular版本
Cmd窗口安装命令:ng --version
出现相关版本表明angular环境搭建成功!
二、创建项目
Angular使用命令ng,所以都是 ng +其他 的组合命令。看了很多创建angular项目的版本,感觉这个版本挺好的,推荐使用:Cmd窗口下输入命令:(可以先cd到一个你指定的目录下再创建项目)
1.ng new demo1 --skip-install (创建angular项目demo1 不使用npm更新)
2.cd demo1 (到demo1文件夹下)
3.cnpm install (使用cnpm更新,更快些)
4.ng serve (运行)或 ng serve --open(运行并用默认浏览器打开)
运行的效果是这样的:把访问地址贴到浏览器运行
初始项目页面
三、Angular 环境搭建以及创建项目的时候可能遇到的错误。
我在创建项目的时候发生了很多次错误,项目有时还不能运行,所以很麻烦,百度贴了很多错误,才知道一些,按照我上面的步骤,应该不会出现此类错误,我把我错的错误贴出来,供参考(解决办法也是百度获得)。
-
npm 安装 angular/cli 失败
建议用cnpm来安装 -
创建项目 npm install初始化项目的时候失败
建议用cnpm install来初始化项目 -
创建项目后用 npm i 或者 cnpm i 后项目没法运行
用 yarn 替代 cnpm 和 npm,步骤为
1 cnpm instal @angular/cli
2 ng new 的时候阻止自动安装 ng 包,只创建 ng 目录
(命令为ng new my-app --skip-install)
3 安装 yarn npm install -g yarn / cnpm install -g yarn
4 进入目录 my-app 使用 yarn 安装 ng 所依赖的包 yarn
记录,总结,分享!学习永远在路上!