今天聊聊我这个Angular新手踩坑后琢磨出来的实战经验。事情是这样，上周接了个后台管理系统的活，吭哧吭哧搭页面，结果改个按钮颜色都得重新编译等半天，急眼了。

第一步：抄近路的命令行工具

原来傻乎乎只用ng serve启动项目，每次保存文件都等得抓狂。后来发现--hmr这玩意儿，直接在命令行敲：ng serve --hmr。神奇了！改样式秒刷新页面，连登录状态都不丢。配合npm-run-all（先在项目里npm i npm-run-all装好），现在启动命令写成："start": "npm-run-all -p hmr json-server"，连模拟数据服务都能同时跑。

第二步：在VSCode里插翅膀

• 装了Angular Language Service插件，现在打ngIf刚敲完星号，后面提示就蹦出来了
• 以前总是拼错@Output，直接装Angular Snippets插件，现在输入a-output敲回车，连括号带引号全套自动生成
• 最狠的是给html文件绑定方法时，以前得切回ts文件翻方法名，现在光标悬停就能看到参数类型

第三步：用开发者工具捉虫

有次下拉框死活不出数据，Augury简直救命了：

1. 浏览器扩展商店搜Augury装上
2. 按F12选Augury面板
3. 点开组件树看见我那个selectData数组竟然是空
4. 顺藤摸瓜发现是调接口时忘了.subscribe()

结果对比

以前新搭个页面流程：

• 建组件=1分钟
• 绑数据=5分钟（总写错变量名）
• 调样式=3分钟（反复编译）

现在全套弄完不到5分钟，主要时间用在喝咖啡上了。