WebStorm无法识别一些Angular组件 - mat-toolbar unknown元素

Question

我使用Angular 5和Angular材料以及WebStorm版本2017.3.1

当我尝试使用<mat-toolbar>具有以下代码的元素时

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给了我一个错误:

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

但是,这在浏览器中正确呈现:

因为它被包含在此行中的模块中import {MatToolbarModule} from '@angular/material';和

imports: [
  BrowserModule,

  MatToolbarModule
],

这里有什么我想念的吗？为什么WebStorm(以及运行测试时ng test)给我这个错误？如何防止此错误/警告？

Answer 1

此错误是通过TypeScript生成的.

如果单击底部的TypeScript选项卡,则可以在控制台中看到错误.

如果通过单击圆圈中的箭头强制TypeScript服务重新启动,则可能会使此错误消失.

这需要先编译.

到目前为止,我找不到将其映射到快捷方式的方法.

感谢@lena和@ Z.Bagley帮助我解决这个问题.