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 命令 - 栴檀 - 博客园

你可能感兴趣的:(报错解决合辑,javascript,开发语言,angular)