I cannot find the exact problem. WebStorm highlights CommonModule directives even if the BrowserModule was provided. Below you can see my app.module
and app.component.html
. But it seems that everything is okay, because the app compiles correctly. There is no any problem highlighted in the Visual Studio Code.
If I point this error, it says:
Property ngIf is not provided by any applicable directive on an embedded template.
app.module
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html (here I get this highlights)
<h1 *ngIf="true">Title</h1>
My packages:
- @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
I tried to invalidate WebStorm caches, also I’ve created a new application and checked if this highlights appears (same situation).
It makes me mad, please help me to figure out this question.
2
Answers
The solution was pretty easy :D I just has to update Webstorm (to 2023.2 EAP v)
The angular structural directives are in the angular common module so that is the one you need to import.