Angular material '；mat工具栏'；不是已知元素-角度5

我已经创建了一个新项目，我正在尝试添加

角度材质

我已经在我的

app

文件夹中创建了

material.module.ts

：

import { NgModule } from '@angular/core';

import {
    MatButtonModule,
    MatMenuModule,
    MatIconModule,
    MatCardModule,
    MatSidenavModule,
    MatFormFieldModule,
    MatInputModule,
    MatTooltipModule,
    MatToolbarModule
} from '@angular/material';

@NgModule({
    imports: [
        MatButtonModule,
        MatMenuModule,
        MatIconModule,
        MatCardModule,
        MatSidenavModule,
        MatFormFieldModule,
        MatInputModule,
        MatTooltipModule,
        MatToolbarModule,
    ],
    exports: [
        MatButtonModule,
        MatMenuModule,
        MatIconModule,
        MatCardModule,
        MatSidenavModule,
        MatFormFieldModule,
        MatInputModule,
        MatTooltipModule,
        MatToolbarModule
    ]
})
export class MaterialModule { }

我已经将其导入到我的一个组件中：

import { MaterialModule } from '../material.module';

此外，我还在

index.html

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

我知道这是有效的，因为我显示了一个

材质图标作为测试：

<i class="material-icons">face</i>

面

但当我尝试创建页脚时，它失败，并显示以下消息：

未捕获错误：模板分析错误：
“mat toolbar”不是已知元素：
1.如果“mat toolbar”是一个角度组件，则验证它是否是此模块的一部分。
2.如果“mat toolbar”是Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以抑制此消息

这对我来说很好：

查看链接，查看是否缺少任何内容。
这是因为您必须将模块导入包含组件声明的模块，而不是导入组件本身：

app.module.ts

从'/material.module'导入{MaterialModule}；
@NGD模块({
进口：[
// ...
材料模块
],
声明：[
霉醇组分，
// ...
]
})

注意：使用材料图标的正确方法是使用
MatIcon
组件。用法示例：

主页
最佳方式

快速修复

import {MatToolbarModule} from '@angular/material/toolbar'; 

在你的app.module.ts中

然后在声明[]中声明MatToolbarModule。
您需要从'@angular/material/toolbar'导入导入{MatToolbarModule}；并将其添加到导入数组中。材料的代码也保存在中。
我没有真正了解差异，但似乎如果我将其导入angular.module.ts中，它会工作，因此我将以这种方式执行，组件应该是
，而不是
。
import {MatToolbarModule} from '@angular/material/toolbar';