mac的angular/cli安装及踩坑记录

一、angular/cli的安装

step1:node+npm安装

首先使用node -v命令查看mac是否已安装node与npm（如已安装则跳过）

node -v
npm -v

安装Node.js

• 下载地址：https://nodejs.org/en/download/
• 安装后在cmd中输入：node -v  确认Node.js环境

安装npm

• npm会随着node的安装一起被安装。
• 在cmd中输入npm -v 确认npm环境。

安装 cnpm（非必需）

cnpm是国内淘宝为了解决npm安装过慢而产生的镜像，因为npm安装是通过外网下载的，很多时候容易安装失败，故建议用cnpm，当然不是必须的。

npm install -g cnpm --registry=https://registry.npm.taobao.org

step2:安装 @angular/cli

Angular CLI是Angular官方开发的一个类似与Vue CLI的脚手架开发工具，它帮我们集成了webpack打包、开发服务器、单元测试、自动编译、部署等功能

npm i -g @angular/cli

如果在上一步安装了cnpm,就可以用cnpm的命令来安装 
如果终端报错 zsh: command not found: cnpm，下文有解决方法

cnpm i -g @angular/cli

检查是否安装成功

ng version

如果到这一步，终端顺利输出了angular/cli的版本号，恭喜你安装成功了，接下来你就可以用ng new my-project 创建项目了！！

二、踩坑解决

但我到了这一步，终端报错 zsh: command not found: ng

使用cnpm命令时，也会报错 zsh: command not found: cnpm
 

由于安装 angular/cli 和 cnpm 时并未报错，初步考虑是 环境变量配置的问题

解决步骤
1、新建并打开 .bash_profile 文件

cd  ～
touch .bash_profile
open .bash_profile

2、添加npm模块安装位置

不同电脑的npm安装位置可能不同，这是我电脑的位置，可以参考下

export PATH=$PATH:/Users/用户名/.npm-global/bin

3、保存后退出，刷新配置文件使其生效。

source .bash_profile

4、运行 ng version 检查 ng 命令是否生效

到了这一步，在当前终端 运行ng 和 cnpm 命令都不报错了

但若新建终端，又会报 zsh: command not found: ng

原因：在终端执行source .bash_profile，只对当前端口生效，重新开窗口就无效

解决方法：修改 .zhsrc 文件，让.bash_profile永久生效

打开文件

cd  ～
open .zshrc

在~/.zshrc 文件最后，增加一行：

source ~/.bash_profile

保存并关闭 .zshrc 文件，此时在新建终端里， 就可以正常使用 ng命令了

附：常用 ng命令

创建应用	ng new
启动应用服务器	ng serve --open
创建一个名为 heroes 的新组件	ng generate component heroes
创建一个名为 hero的服务	ng generate service hero
打包	ng build -prod

更多命令，可参考 angular-cli 命令 - 栴檀 - 博客园