Property binding error after updating to Angular 13

Question

I'm getting this error

Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations"

Even thou it works fine when I run ng serve.

I started to get this compilation error when I updated angular to v13.

I already tried restarting Vscode and reinstalling Angular Language Service and installing a previous version of Angular Language Service... None of them works..

My app.module.ts:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

Answer 1

From Github, disabling Use legacy View Engine language service solves the issue.

Go into extension settings of Angular Language Service and uncheck Use legacy View Engine language service.

Answer 2

Try this.

IN .ts file:

export class Helloworld implements OnInit {
  valid: boolean = false;

   ngOnInit(){
     this.valid = true;
   }

}

In HTML

<div *ngIf="valid"> Hello World</div>

Here using Structural Binding in Angular will be able to recognize the your"valid"property.

Answer 3

I ran to this error myself a while ago.

I searched the web for it and according to this issue, it is a problem with intellisense or indexing after running ngcc and nothing to do with your code. You can verify my statement by deleting node_modules and package-lock.json and run npm i. You will see that errors will go away but when you run run serve or ng build it will popup again. Anyway Your code will compile and run as it is with no problem but you will see that error until angular team fix this issue.

As a workaround you can wrap it in a <ng-container> and (in some cases) it will fix the error but I didn't do it myself. I'm waiting for a bugfix patch.