WebStorm 无法识别某些 Angular 组件 - mat-toolbar 未知元素

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 { }

应用程序组件.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 语言服务。
看起来与https://github.com/angular/angular/issues/14961相关； 看看更新 Typescript 到 2.5.2+ 是否有帮助

Answer 3

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