搭建Angular.io的开发环境

开发环境：

1. 操作系统：Mac iOS

2. IDE：Intellij idea 2017

3. Node Version: node -v 8.9.4

4. npm version: npm -v  5.6.0

（一）开始创建项目：

1. 安装淘宝的cnpm，以后使用cnpm指向的淘宝镜像安装模块，提高速度（通过cnpm -v命令查看详细内容）：

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

2. 查看安装模块信息是否错误：cnpm list -g ，如果发生错误，可以清理安装缓存：cnpm  cache verify

cnpm list -g
cnpm cache verify

3. 可以设置cnpm为全局nodejs包管理工具：ng set --global packageManager=cnpm，这样在用：ng new my-project命令速度会更快，因为依赖是从淘宝镜像服务器上获取。我被它坑苦了，淘宝镜像版本不全面引起：npm run build错误：ng new my-project的时候，直接从淘宝镜像获取node moduls

ng set --global packageManager=cnpm

4. 安装angular开发环境：

npm install -g @angular/cli

5. 创建angular项目，系统会自动创建一个基本的开发环境，其中重要的文件package.json，用户可以根据需要进行编辑：

扫描二维码关注公众号，回复： 886417 查看本文章

ng new my-project

6. 启动服务器，进行测试：

ng serve --open

7. 进行打包、编译，自动创建dist目录

ng build --prod

8. 用npm启动开发环境：

npm start

（二）完全的开发环境，少不了调试，应用Jetbrans Debug工具

1. Chrome环境下安装 jetbrains IDE插件，搜索关键字：jetbrains ide support，点击“Add to Chrome"进行安装。安装成功，会在Chrome地址栏右边出现一个“JB”图标，该图标是用来在浏览器之间切换，并将Chrome设置为开发者模式：chrome://extensions。

2. 配置IDE：使用Javascript Debug服务进行配置：配置npm start集成运行环境，选择具体的项目工作目录。

3. 配置调试端口，默认：63342。打开idea的系统设置：Build,Execution,Deployment-->Debugger-->Port 63342。

4. Jetbrains ide support external plugin是一个远程调试模式，点击插件上“JB”图标，选择“Inspect In IDEA”，切换至调试模式。

(三）搭建Angular前端调试和调优，应用Augury插件：

1. Chrome应用商店下载，或者直接从工具官网下载并安装插件：augury.angular.io，安装成功，会在地址栏的右边出现一个紫色月亮（为什么会是紫色？）图标。

2. 启动npm start，直接在前端（浏览器）实现调试和调优，

3. 比JB插件要方便得多，JB插件后台有一个BUG，不能看到类成员变量的值，这是致命的；JB不能进行调优；JB的安装也比较复杂，有了augury，JB基本上是个废柴。