Angular CLI 必须全局安装，VSCode 仅编辑调试，真正运行依赖 @angular/cli；需装 Angular Language Service、Prettier、ESLint 三插件，并确保 Ivy 启用、TS 版本匹配、launch.json 配置正确。
Angular CLI 必须全局安装，VSCode 只负责编辑和调试
VSCode 本身不运行 Angular 项目，真正起作用的是 @angular/cli。没装 CLI，光装插件只是“看起来很忙”。ng serve、ng build 这些命令全靠它驱动。
常见错误现象：Command 'ng' not found 或 VSCode 终端里执行 ng version 报错。
- 用
npm install -g @angular/cli安装（注意加-g） - 确认 Node.js 版本 ≥ 18.13.0（Angular 17+ 要求），用
node -v检查 - 如果用 pnpm，别混用 npm 全局安装 CLI；pnpm 用户建议统一用
pnpm add -g @angular/cli - Windows 上遇到权限问题？关掉 PowerShell 的执行策略限制，或改用管理员终端执行安装
必须装的三个插件：Angular Language Service、Prettier、ESLint
其他插件比如 “Angular Snippets” 或 “TypeScript Import Sorter” 属于锦上添花，但这三个直接影响代码补全、报错提示和格式一致性。
容易踩的坑：Angular Language Service 插件在 Angular 16+ 后对 TypeScript 版本敏感——它依赖项目里 typescript 包的版本，不是 VSCode 自带的 TS 版本。如果补全失效、模板中 *ngIf 不识别，大概率是项目 node_modules/typescript 和插件不匹配。
- 装插件后重启 VSCode，别只重载窗口
- 检查项目根目录是否有
tsconfig.json，且其中"compilerOptions": { "types": ["@angular/core"] }存在（CLI 默认生成，但手动创建项目可能漏） -
Prettier配置要和.prettierrc对齐；若团队用 ESLint + Prettier 混合规则，务必装eslint-config-prettier并在.eslintrc.json中禁用冲突规则
调试 Angular 应用：别直接点「运行」按钮，要用 launch.json 配置 Chrome
VSCode 自带的「运行和调试」面板默认不识别 Angular 项目。点绿色三角形只会跑个空 Node 进程，根本不会打开浏览器或监听 localhost:4200。
真实使用场景：想在组件 TS 文件里打断点，F5 启动后自动打开 Chrome 并停在 ngOnInit()。
- 按
Ctrl+Shift+P（Win/Linux）或Cmd+Shift+P（Mac），输入 “Debug: Open launch.json”，选 “Chrome” 环境 - 生成的
.vscode/launch.json里，确保"url": "http://localhost:4200/"，且"webRoot"指向"${workspaceFolder}" - 先手动运行
ng serve，再点 VSCode 的「开始调试」——不要指望 launch.json 自动拉起 dev server（除非你配了preLaunchTask，但那又引入 task.json 复杂度） - Chrome 必须已安装且路径正确；Mac 用户如果用 Chrome Canary，需显式指定
"runtimeExecutable": "/Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome Canary"
模板语法高亮和跳转失效？检查 angularCompilerOptions 里的 enableIvy
Angular 从 v9 开始默认启用 Ivy，但如果你打开老项目（尤其是 v8 或更早升级上来的），tsconfig.json 里可能还留着 "enableIvy": false。这会导致 VSCode 插件无法解析模板绑定、@Input() 跳转失败、甚至 async 管道不提示类型。
性能影响明显：Ivy 关闭时，Language Service 回退到旧 View Engine 模式，响应变慢，补全延迟半秒以上是常态。
- 打开项目根目录
tsconfig.json，找到"angularCompilerOptions"段 - 删掉
"enableIvy": false，或改成true（Angular 13+ 已强制 Ivy，设为 false 会报错） - 改完保存后，在 VSCode 里按
Ctrl+Shift+P→ 输入 “TypeScript: Restart TS Server” 强制刷新语言服务 - 如果仍无效，检查是否启用了
strictTemplates: true—— 它会让模板类型检查更准，但也更挑配置
最常被忽略的一点：很多人以为装完插件就万事大吉，其实 Angular Language Service 的状态藏在右下角状态栏。鼠标悬停能看到 “Angular: Ready” 或 “Angular: Loading…”，后者卡住超过 10 秒，基本就是 tsconfig.json 或 node_modules 有硬伤。
