Angular CLI 必须全局安装，VSCode仅编辑调试；ng命令报“command not found”主因是CLI未装或PATH未配置，需在系统终端验证ng version并确保npm全局路径加入环境变量。
Angular CLI 必须全局安装，VSCode 本身不运行项目，只负责编辑和调试——没装 @angular/cli，所有插件都是摆设。
为什么 ng 命令在 VSCode 终端里报 “command not found”
这不是插件问题，是 CLI 根本没进系统 PATH。VSCode 终端默认不继承 shell 的完整环境变量，尤其 Windows PowerShell 或某些 macOS zsh 配置下更明显。
- 先在系统终端（不是 VSCode 里）执行
ng version，确认 CLI 已装；失败就运行npm install -g @angular/cli（pnpm用户用pnpm add -g @angular/cli） - Windows 上若提示权限被拒，别改执行策略——直接用 Windows Terminal（管理员模式）重装
- 装完检查
npm config get prefix输出的路径是否已加入系统PATH；macOS/Linux 用户可能需要手动把$(npm config get prefix)/bin加进~/.zshrc或~/.bash_profile - VSCode 启动方式也影响：不要双击打开文件夹，进项目目录后执行
code .，确保终端初始化时能读到 PATH - 如果仍不行，在 VSCode 设置里搜
terminal.integrated.inheritEnv，勾选它
Angular Language Service 插件不生效？先看这三处
补全失效、*ngIf 不识别、@Input() 无跳转，90% 是配置断在底层链路上，不是插件坏了。
- 右下角点击语言模式（显示 “HTML”），选
Configure File Association for '.html'→ 设为Angular HTML；否则插件压根不加载模板支持 - 检查项目根目录
tsconfig.json是否含"plugins": [{ "name": "@angular/language-service" }]；CLI 默认生成，但手动建项目或从旧版升级常漏掉 - 插件版本必须和
@angular/core大版本一致（如项目是 v17.2.0，插件就得用 v17.x）；它依赖的是node_modules/typescript版本，不是 VSCode 自带 TS，运行npm ls typescript确认是否 ≥5.2（Angular 17 要求） - 装完必须彻底重启 VSCode（不是重载窗口），或手动执行命令面板里的
Angular: Restart Angular Language Service
launch.json 配好了，F5 却不命中断点
VSCode 调试器不会自动拉起 ng serve，也不会自动映射源码——它只连接已运行的服务，并靠 source map 把浏览器代码反查回 TS/HTML 文件。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 务必先手动运行
ng serve，等看到Compiled successfully再点 F5；否则 Chrome 打开空白页，断点永远不触发 -
webRoot必须是"${workspaceFolder}/src"，不是"${workspaceFolder}"或"./src"；AOT 模式下调试不可用，只限ng serve开发模式 - 确认
angular.json中build.options.sourceMap为true（开发模式默认开启，但自定义构建配置可能关掉） - 必须装官方
Debugger for Chrome或Microsoft Edge Tools for VS Code；VSCode 自带的 Node 调试器对前端无效 - Mac 用户别用 Safari 调试——它不支持 VSCode 的 source map 映射，断点基本失效
该装哪些插件？别让“看起来很忙”拖慢热更新
装得越多 ≠ 越好，Angular Language Service 和 TypeScript 的耦合极深，冗余插件会抢夺符号解析权，尤其在 Windows + WSL 场景下，热更新延迟明显升高。
- 只留三个核心：
Angular Language Service（必须）、ESLint（推荐，配@angular-eslint/eslint-plugin）、Prettier（建议，但要禁用 ESLint 冲突规则） - 禁用
Auto Import类插件：它和 Angular Language Service 的自动导入逻辑冲突，会导致重复import，尤其对Injectable、Observable这类符号误插位置 - 删掉
Angular Snippets：CLI 的ng g c users/list已覆盖全部脚手架需求，片段容易过时，还干扰补全优先级 - 不用
jsconfig.json：Angular 项目只认tsconfig.json，多一个jsconfig.json反而让路径解析错乱，import标红但实际能跑
最常被忽略的其实是 tsconfig.json 里 "baseUrl" 和 "paths" 的写法——漏掉末尾 /*，比如写成 "@core": ["app/core"]，VSCode 就无法解析 import { xxx } from '@core/http'，但也不报错，只能靠反复点进 any 类型里兜圈子。
