Angular 13 : Can't bind to 'ngIf' since it isn't a known property of 'div'

Viewed 146

So overnight my code has just gone bananas. In all my components that make use of *ngIf I am getting the following error on SomeComponent.html file:

Can't bind to 'ngIf' since it isn't a known property of 'div'

HTML Source code:

<div *ngIf="!admin"></div>

I am also recieving the following in the somecomponent.component.ts file for animations:

Error during template compile of 'SomeComponent'
Function calls are not supported in decorators but 'trigger' was called

.TS code snippet:

animations: [
trigger('detailExpand', [
  state('collapsed', style({ height: '0px', minHeight: '0' })),
  state('expanded', style({ height: '*' })),
  transition(
    'expanded <=> collapsed',
    animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')
  ),
]),

I have reviewed almost every issue I can find on stackoverflow and no solution seems to work.

I can confirm the following:

  • Using VS Code Version: 1.69.2
  • Extention cersions: Angular Essentials v13.0.0, Angular Snippets v13.0.0, Angular Language Services v14.1.0 (I have tried installing older version and still have the same issue)
  • Angular 13
  • I have imported BrowserModule in app.module.ts and added it to imports:[]
  • I have added CommonModule, no change so removed it as BrowserModule re-exports CommonModule (https://angular.io/api/common/CommonModule)
  • I have toggled the Use Legacy View Engine language service setting, but this setting is incompatible with Angular 13: Screenshot of settings page

The code still compiles successfully and project runs as expected without any issues so not sure what is going on.

0 Answers
Related