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

Question

我使用的是Angular 5和Angular material以及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帮助我解决这个问题。

Answer 2

错误来自Angular language service。 与https://github.com/angular/angular/issues/14961相关;看看将Typescript更新到2.5.2+是否有帮助