如何让 WebStorm 识别 Angular Material 语法？

Question

I'm using @angular/material with Angular 9. WebStorm doesn't recognize the @angular/material syntax:

It also doesn't recognize the correct type:

No custom shenanigans going on. Everything is straight from their tutorials in a brand new angular project generated with the CLI.

The table declaration:

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">

My TS file:

export interface Property {
  street: string;
  zip: string;
  city: string;
  lat: number;
  lng: number;
  rooms: number;
  area: number;
  monthlyFee: number;
  builtYear: number;
  soldDate: string;
}

const ELEMENT_DATA: Property[] = [
  {
    street: 'Vasagatan 1',
    zip: '11345',
    city: 'Stockholm',
    lat: 89.123912,
    lng: 89.123912,
    rooms: 3,
    area: 87,
    monthlyFee: 2450,
    builtYear: 1989,
    soldDate: '2020-04-30',
  },
];

@Component({
  selector: 'app-dataset-list',
  templateUrl: './dataset-list.component.html',
  styleUrls: ['./dataset-list.component.scss']
})
export class DatasetListComponent implements OnInit {

  displayedColumns: string[] = ['street', 'zip', 'city', 'lat', 'lng', 'rooms', 'area', 'monthlyFee', 'builtYear', 'soldDate'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);

  @ViewChild(MatSort, {static: true}) sort: MatSort;

  ngOnInit() {
    this.dataSource.sort = this.sort;
  }
}

Answer 1

The first issue must be caused by problems recognizing the metadata added to material classes when building the project with Ivy, WEB-45270 . This issue is solved in upcoming WebStorm 2010.1.2.

The second looks related to WEB-43716