Property binding error after updating to Angular 13-CodePudding

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 {}

CodePudding user response：

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.

CodePudding user response：

*ngIf waits 1 of the following

An expression which when it gets evaluated will return true or false (ex *ngIf = "1 != 2")
A bound field from .ts file which will get evaluated to true or false (ex *ngIf = "myvar")
A mix from the previous 2 cases. (ex *ngIf = "myvar != 1")

I am sure your *ngIf would work if you made it *ngIf = "true == true" (previous case 1)

or if you held a field variable in your .ts file myvar = true; and then you did *ngIf = "myvar" (previous case 2)

What I think is happening is that because *ngIf does not see any expression there it assumes it must be some field variable in .ts file which must be evaluated. So it tries to find a field variable with name true in your .ts file, which does not exist and then you get the error

Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly