WebStorm 创建 Angular 项目前需关闭自动导入 TypeScript 类型,改用终端执行 ng new;启用 Angular Language Service;配置 Node.js 解释器指向 node_modules/.bin/ng;确保 tsconfig.json 的 include 包含 "src/*/.html"。

Angular CLI 创建项目前,WebStorm 要关掉“自动导入 TypeScript 类型”
WebStorm 默认开启 Auto-import 功能,会在你敲代码时自动插入 import 语句。但 Angular CLI 生成的项目(尤其是 v15+)默认启用 strict 模式和 typeRoots 配置,自动导入可能把 @angular/core 的类型从 node_modules/@angular/core 错导成 node_modules/@types/angular(这是给 AngularJS 用的),导致 Component、Injectable 报红或跳转失效。
- 进
Settings > Editor > General > Auto Import - 取消勾选
Enable auto-import,或至少关掉Insert imports on paste和Add unambiguous imports on the fly - 手动导入更稳:写完
@Component({})后按Alt+Enter,选带@angular/core路径的那条,别点“auto-import all”
新建项目必须用终端执行 ng new,不能靠 WebStorm “New Project” 向导
WebStorm 内置的 “Angular CLI” 项目模板早已过时,不支持 Angular v14+ 的 standalone components、signals、SSR 配置结构,且会漏掉 .vscode/settings.json 和 tsconfig.spec.json 等关键文件,后续运行 ng test 或 ng serve 直接报错 Cannot find module '@angular-devkit/build-angular'。
- 在 WebStorm 终端(
Alt+F12)里执行:ng new my-app --routing=true --style=scss - 等 CLI 完全结束(看到
Successfully initialized git.)再用 WebStorm 打开该文件夹 - 首次打开后,右下角弹出 “Angular Language Service” 提示,点
Enable—— 这步决定模板语法高亮和*ngIf补全是否生效
ng serve 启动失败?检查 WebStorm 的 Node.js 解释器是否指向项目本地 node_modules/.bin/ng
WebStorm 默认用全局 ng(比如通过 npm install -g @angular/cli 装的),但 Angular CLI 强烈要求本地 CLI 版本与项目 @angular/cli 依赖严格一致。全局 CLI v17 去跑一个 package.json 里写 "@angular/cli": "16.2.12" 的项目,大概率卡在 Compiling @angular/core : es2015 as esm2015 不动,或报 Unknown option: '--disable-host-check'。
- 进
Settings > Languages & Frameworks > Node.js and NPM - 把
Node interpreter改为项目根目录下的:node_modules/.bin/ng(注意不是node,是ng) - Run Configuration 里,
Command填serve,Working directory设为项目根路径,别留空
模板中 *ngIf 不补全、组件属性标红?重启 Angular Language Service 并确认 tsconfig.json 包含 include
WebStorm 的 Angular 插件依赖 TypeScript 服务读取 tsconfig.json 来识别模块边界。如果项目里 tsconfig.json 的 include 字段只写了 ["src/**/*"],但组件模板(.html)不在 src/ 下(比如用了 projects/ 多工程结构),或者漏了 "src/**/*.html",就会导致模板无法关联到对应 TS 类,async 管道、formControlName 全部失焦。
- 打开项目根目录
tsconfig.json,确保include数组包含:"src/**/*.html" - 在 WebStorm 中按
Ctrl+Shift+A,搜Restart Angular Language Service,强制重载 - 如果用了
projects/my-lib/tsconfig.lib.json,还得在该文件里也加include,否则库里的组件模板照样不识别
ng 二进制路径和 tsconfig.json 的 include 范围——它们不出错,只是让你“感觉哪里不太顺”。

















