WebStorm误高亮CommonModule指令（*ngIf/*ngFor）问题求助

问题场景 #

已在AppModule中导入BrowserModule（该模块默认包含CommonModule），项目编译运行完全正常，但WebStorm始终将模板中的*ngIf、*ngFor等指令标记为未提供，提示：

Property ngIf is not provided by any applicable directive on an embedded template.

VS Code无此异常提示，已尝试清除WebStorm缓存、新建测试项目，问题依旧。项目依赖版本如下：

• @angular-devkit/architect 0.1601.0
• @angular-devkit/build-angular 16.1.0
• @angular-devkit/core 16.1.0
• @angular-devkit/schematics 16.0.6
• @angular/cli 16.0.6
• @schematics/angular 16.0.6
• rxjs 7.8.1
• typescript 5.0.4

相关代码示例：
app.module.ts

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html（此处出现错误高亮）

<h1 *ngIf="true">Title</h1>

解决办法 #

1. 适配Angular插件版本 #

打开Settings/Preferences > Plugins，找到Angular插件，检查版本是否与你的Angular 16.x版本兼容。若存在更新，点击更新后重启WebStorm。

2. 指定项目本地TypeScript版本 #

WebStorm可能默认使用内置TypeScript版本，导致与项目版本不匹配。操作路径：Settings/Preferences > Languages & Frameworks > TypeScript，将TypeScript version设置为项目本地的node_modules/typescript，应用设置后重启IDE。

3. 彻底清除缓存并重新索引 #

执行File > Invalidate Caches...，勾选所有缓存选项后选择Invalidate and Restart，等待WebStorm完成项目索引后再检查模板。

4. 完善tsconfig.json的include规则 #

确认tsconfig.json中include字段包含模板文件，确保WebStorm能正确解析指令关联：

"include": [
  "src/**/*.ts",
  "src/**/*.html",
  "src/**/*.scss"
]

5. 重置Angular插件 #

在插件设置中先禁用Angular插件，重启WebStorm后重新启用插件，再次重启IDE让插件重新加载项目配置。

内容的提问来源于stack exchange，提问作者mlichlundia