WebStorm not recognising some Angular components - mat-toolbar unknown element

Question

I am using Angular 5 with Angular material and WebStorm version 2017.3.1

When I try to use the <mat-toolbar> element with the following code

app.module.ts

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

import {MatToolbarModule} from '@angular/material';

import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    MatToolbarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<mat-toolbar>
  <span>Title</span>
</mat-toolbar>

WebStorm gives me an error:

'mat-toolbar' is not a known element:
1. If 'mat-toolbar' is an Angular component, then verify that it is part of this module.

However , this renders correctly in the browser:

Because it is included in the module with this line import {MatToolbarModule} from '@angular/material'; and

imports: [
  BrowserModule,

  MatToolbarModule
],

Is there something I'm missing here? Why does WebStorm (and also when running tests via ng test ) give me this error? How can I prevent this error/warning?

Answer 1

This error is generated via TypeScript.

You can see the error in the console if you click on the TypeScript tab at the bottom.

It's possible to make this error go away if you force the TypeScript service to restart by clicking on the arrow in a circle.

This requires a compile first .

So far, I cannot find a way to map this to a shortcut.

Thanks to @lena and @Z.Bagley for helping me figure this out.

Answer 2

The error comes from Angular language service .
Looks related to https://github.com/angular/angular/issues/14961 ; see if updating Typescript to 2.5.2+ helps

Answer 3

I know this isn't the problem the OP had, but wanted to share this in case someone comes across this post and is still experiencing this problem in WebStorm and are not getting TypeScript compile errors, here's what worked for me: In WebStorm select menu item File > Invalidate Caches / Restart. This problem happened to me in WebStorm 2019.3 .