开发环境:
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,用户可以根据需要进行编辑:
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基本上是个废柴。