Angular项目环境的搭建&项目初始化----AngularCLI 11.x版本的使用详解
一、准备环境
1、安装node.js
安装步骤请参考【Node.js下载安装及配置:https://www.cnblogs.com/freecolor/p/14000263.html】
1 // 输入以下命令，检查是否安装成功（看到版本号即成功） 2 node -v #----查看node版本号 (至少>=6.0版本) 3 npm -v #----查看npm版本号 (至少>=3.0版本)
2、安装python 2.7.x版本即可【下载地址：https://www.python.org/downloads/release/python-2714/】
*注意：安装Python时候，注意勾选安装界面上的`Add Python to path`，这样才能自动将Python安装到系统环境变量中；
*安装完毕之后，可以在命令行中运行`python`，检查是否成功安装了python。
1 // 安装成功后 输入以下命令验证 2 python 3 4 // 或者 5 6 python --version
3、安装C++的编译工具Visual Studio（注意：不是Visual Studio Code）
1 //如果没有安装Visual Studio 则需要输入以下命令：【安装过程比较久请耐心等待】 2 npm install --global --production windows-build-tools
注意： Windows Vista / 7 依赖 .NET Framework 4.5.1
**安装windows-build-tools一直处于still waiting for installer log file ... 状态
这是因为.NET Framework的版本过低,升级即可,进入https://dotnet.microsoft.com/download/visual-studio-sdks，单击Developer Pack下载4.5.1版本，双击安装后在继续执行 windows-build-tools命令即可
4、设置npm镜像为taobao镜像，以加速后面的过程（提高下载速度）
npm config set registry https://registry.npm.taobao.org --global
二、安装脚手架AngularCLI &应用其初始化项目
Angular CLI 是 Angular 官方开发的一个类似于 Vue CLI 的脚手架开发工具，它帮我们集成了 webpack 打包、开发服务器、单元测试、自动编译、部署等功能特性。
1、安装脚手架工具AngularCLI【win10系统，建议以管理员身份运行黑窗口，执行以下命令】
1 //全局安装脚手架工具 2 npm i -g @angular/cli 3 4 //输入命令测试是否安装成功（查看版本号） 5 ng --version
安装失败解决方法：
- 如果安装失败，请手动把全局的
@angular/cli删掉：npm uninstall -g @angular/cli - 如果
node_modules删不掉，爆出路径过长之类的错误，请尝试用一些文件粉碎机之类的工具强行删除。 - 无论你用什么开发环境，安装的过程中请仔细看错误日志。很多同学没有看错误日志的习惯，报错的时候直接懵掉，根本不知道发生了什么。
- 然后重新安装
2、使用脚手架工具初始化项目
//输入以下命令，即可初始化项目 ng new 项目名称 #--如 ng new my-ng-project
3、启动运行项目：进入项目根目录执行以下命令即可
1 //使用方法1： 2 npm start 3 4 //或者使用方法2：【看好是 serve 不是 server】 5 ng serve
然后就可以看到一个狠酷的页面效果😂😂😂😂😂😂
PS:
一些常见的坑
@angular/cli 这种“全家桶”式的设计带来了很大的方便，同时也有一些人不太喜欢，因为很多底层的东西被屏蔽掉了，开发者不能天马行空地自由发挥。比如：@angular/cli 把底层 webpack 的配置文件屏蔽掉了，很多喜欢自己手动配 webpack 的开发者就感到很不爽。
对于国内的开发者来说，上面这些其实不是最重要的，国内开发者碰到的坑主要是由两点引起的：
- 第一点是网络问题：比如
node-sass这个模块你很有可能就装不上，原因你懂的。 - 第二点是开发环境导致的问题：国内使用 Windows 平台的开发者比例依然巨大，而 @angular/cli 在 Windows 平台上有一些非常恶心的依赖，比如它需要依赖 python 环境、Visual Studio 环境。
所以，如果你的开发平台是 Windows，请特别注意：
- 给npm设置使用taoboa镜像下载包
- 如果安装失败，请手动把 node_modules 目录删掉重试一遍，全局的 @angular/cli 也需要删掉重装，cnpm uninstall -g @angular/cli。
- 如果 node_modules 删不掉，爆出路径过长之类的错误，请尝试用一些文件粉碎机之类的工具强行删除。
- 无论你用什么开发环境，安装的过程中请仔细看 log。很多朋友没有看 log 的习惯，报错的时候直接懵掉，根本不知道发生了什么。
关于编辑器的选择
如你所知，一直以来，前端开发领域并没有一款特别好用的开发和调试工具。
- WebStorm 很强大，但是吃资源很严重。
- Sublime Text 插件很多，可惜要收费，而国内的企业还没有养成花钱购买开发工具的习惯。
- Chrome 的开发者工具很好用，但是要直接调试 TypeScript 很麻烦。
所以，Visual Studio Code（简称 VS Code）才会呈现出爆炸性增长的趋势。它是微软开发的一款编辑器，完全开源免费。VS Code 底层是 Electron，界面本身是用 TypeScript 开发的。对于 Angular 开发者来说，当然要强烈推荐 VS Code。最值得一提的是，从1.14开始，可以直接在 VS Code 里面调试 TypeScript 代码。