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 中發生在我身上。