Loading

安装Angular-CLI脚手架工具

目前，无论你使用什么前端框架，都必然要使用到各种 NodeJS 工具，Angular 也不例外。与其它框架不同，Angular 从一开始就走的“全家桶”式的设计思路，因此 @angular/cli 这款工具里面集成了日常开发需要使用的所有 Node 模块，使用 @angular/cli 可以大幅度降低搭建开发环境的难度。

Angular CLI 类似于 Vue CLI，是 Angular 官方开发的一个脚手架工具，专门用来开发构建 Angular 应用程序。

  • Angular 应用程序初始化

  • 内置开发服务器

  • 代码变更浏览器自动刷新

  • 创建组件、指令、服务等集成工具

  • 测试和维护

  • ......

安装依赖环境

安装 Node.js

node -v

安装 npm

  • npm 会随着 Node 的安装被一起安装

  • 确认 npm 环境

npm -v

安装 Python

python --version

安装 C++ 编译工具

Angular CLi 在 Windows 上同时依赖 C++ 编译工具，所以我们这里也需要单独安装。

当然如果你的机器安装了 Visual Studio，其中包含了C++编译工具则无需安装（注意，不是 Visual Studio Code）。

执行下面的命名安装 C++ 编译工具：

npm install --global --production windows-build-tools

Windows Vista / 7 依赖 .NET Framework 4.5.1

安装 `cnpm`

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

安装脚手架工具 `Angular CLI`

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

使用它的第一步就是先安装：

cnpm i -g @angular/cli

安装结束之后我们可以通过在命令行输入以下命令测试是否安装成功：

ng --version
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.6.3
Node: 8.9.4
OS: win32 x64
Angular:
...

安装失败解决方案

  • 在 Windows 平台上安装 @angular/cli 会报很多 error，那是因为 @angular/cli 在 Windows 平台上面依赖 Python 和 Visual Studio 环境，而很多开发者的机器上并没有安装这些东西

  • 以及 node-sass 模块被墙的问题，强烈推荐使用 cnpm 进行安装，可以非常有效地避免撞墙

npm i -g cnpm --registry=https://registry.npm.taobao.org
cnpm i -g @angular/cli

  • 如果安装失败，请手动把全局的 @angular/cli 删掉： cnpm uninstall -g @angular/cli

  • 如果 `node_modules` 删不掉，爆出路径过长之类的错误，请尝试用一些文件粉碎机之类的工具强行删除。

  • 无论你用什么开发环境，安装的过程中请仔细看错误日志。很多同学没有看错误日志的习惯，报错的时候直接懵掉，根本不知道发生了什么。

posted @ 2022-03-19 11:08  1640808365  阅读(357)  评论(0)  编辑  收藏  举报