2

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.

kenopen
  • 61
  • 6
  • Check your .html: be sure you use `[@detailExpand]="yourVariable"` or you dind't forgot a quote or similar. Check also from where are you import the trigger ans animations (should be from `'@angular/animations';` Sorry I can not imagine what are bad – Eliseo Jul 25 '22 at 15:19
  • Hi @Eliseo, so on all my html files throught all my components I am getting things like 'mat-dialog-content' / 'mat-icon' / 'mat-form-field' etc is not a known element. So I am assuming something isn't being picked up from the app.module.ts. Even removing everything and adding back one thing at a time doesn't resolve the issues. – kenopen Jul 25 '22 at 15:26
  • have you added your component to declarations of your module? – devmiles.com Jul 25 '22 at 15:37
  • @devmiles.com, I have indeed. – kenopen Jul 25 '22 at 15:43
  • Is there any error in your app.module? – Sana Jul 25 '22 at 20:32
  • @UchihaMadara, no errors coming up in app.module.ts. – kenopen Jul 26 '22 at 07:06
  • If I disable the Angular Language Service extension in VS Code then the errors stop appearing. But I can't think that this is a wise workaround? – kenopen Jul 26 '22 at 08:16

0 Answers0