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

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 测试时）给我这个错误？我怎样才能避免这种情况 error/warning？

Answer 1

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

Answer 2

此错误是通过 TypeScript 生成的。

如果单击底部的 TypeScript 选项卡，您可以在控制台中看到错误。

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

这需要先编译。

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

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

Answer 3

我知道这不是 OP 遇到的问题，但我想分享这个以防有人遇到这个 post 并且仍然在 WebStorm 中遇到这个问题并且不是获取 TypeScript 编译错误，这对我有用：在 WebStorm select 菜单项 File > Invalidate Caches / Restart 中。这个问题发生在我的 WebStorm 2019.3 .

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

WebStorm not recognising some Angular components - mat-toolbar unknown element

javascript

webstorm

angular-material2

angular