模板解析错误:“mat-icon”不是已知元素

新手上路,请多包涵

我正在使用 Angular CLI 和 angular material v.5.2.5 并尝试使用

垫子图标按钮

但是控制台产生了这样的错误:

未捕获的错误:模板解析错误:’mat-icon’ 不是已知元素…

如果我使用

垫凸起按钮

一切正常无法弄清楚如何解决

索引.html

  <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Todo</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"
    rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
</body>
</html>

main.ts

  import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

app.module.ts

  import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MatButtonModule } from '@angular/material/button';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

原文由 Vladyslav Plakhuta 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 678
2 个回答

您的导入中缺少 MatIconModule。

 imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MatButtonModule,
    MatIconModule, // <-- here
],

原文由 Ploppy 发布,翻译遵循 CC BY-SA 4.0 许可协议

对我来说,垫子图标模块已正确导入,但由于某些奇怪的原因,错误来自的组件不在应用程序模块声明中。

 @NgModule({
  declarations: [
   ...
   TheFileWithMatIconTagComponent,
   ...
 ]

原文由 Ilesanmi John 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进