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+是否有帮助

Answer 3

我知道这不是OP所遇到的问题，但是我想与他人分享一下，以防有人碰到这篇文章，并且在WebStorm中仍然遇到此问题，并且不遇到TypeScript编译错误，这是对我有用的方法：在WebStorm中，选择菜单项“文件”>“使缓存无效/重新启动”。 WebStorm 2019.3中发生了此问题。