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 './appponent';


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

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

appponent.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 ponent, 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?

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.ponent';


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

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

app.ponent.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 ponent, 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?

• javascript
• angular
• webstorm
• angular-material2

• 1 It feels like you'd have to restart your ng serve, this happens to me sometimes as well, like if the module import was ignored. Not related to webstorm tho. – Supamiu Commented Dec 20, 2017 at 15:44
• 1 @MattLishman Javascript and Webstorm are both reasonable tags for this since you are working with both. Have you restarted your IDE since your most recent npm install ... (close window explorers too)? That might fix the error showing in Webstorm, by clearing cache. For ng test you'd have to configure your spec file correctly. If your app runs flawless with ng serve then I'd suggest trying to ignore it since it's not a big issue. – Z. Bagley Commented Dec 20, 2017 at 16:02
• @Z.Bagley Good suggestion about an IDE restart. This makes the error go away (even closing the project and reopening it does). This isn't an ideal solution though, so i'll submit a bug/feature request to JetBrains at some point to try do this automatically. Feel free to add this as an answer and i'll accept if you think it's worth it. – Matt Lishman Commented Dec 20, 2017 at 16:16
• this is not a webstorm error, message clearly es from Angular service. Likely it's github./angular/angular/issues/14961 – lena Commented Dec 20, 2017 at 16:19
• 1 @MattLishman Your answer works best for clearing this up and possibly helping others down the line. – Z. Bagley Commented Dec 20, 2017 at 17:27

3 Answers 3

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 pile 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.

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

I know this isn't the problem the OP had, but wanted to share this in case someone es across this post and is still experiencing this problem in WebStorm and are not getting TypeScript pile 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 .