'mat-toolbar' 不是已知元素 - Angular 5答案

【问题标题】：'mat-toolbar' is not a known element - Angular 5'mat-toolbar' 不是已知元素 - Angular 5
【发布时间】：2018-05-03 07:51:03
【问题描述】：

我创建了一个新项目，我正在尝试添加angular-material。

我在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">

在我的style.css

@import '~@angular/material/prebuilt-themes/pink-bluegrey.css';

我知道它可以正常工作，因为我已经展示了 material-icon 作为测试：

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

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

未捕获的错误：模板解析错误： 'mat-toolbar' 不是已知元素： 1. 如果“mat-toolbar”是一个 Angular 组件，那么验证它是这个模块的一部分。 2. 如果 'mat-toolbar' 是一个 Web 组件，则将 'CUSTOM_ELEMENTS_SCHEMA' 添加到该组件的 '@NgModule.schemas' 以禁止显示此消息。

【问题讨论】：

组件应该是<mat-icon>，不是 <i class="material-icons">。

标签： angular-material angular5

【解决方案1】：

那是因为你必须将一个模块导入到包含组件声明的模块，而不是到组件本身：

app.module.ts

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

@NgModule({
  imports: [
    // ...
    MaterialModule
  ],
  declarations: [
    MyCoolComponent,
    // ...
  ]
})

附：使用材质图标的正确方法是使用MatIcon 组件。示例用法：

<mat-icon>home</mat-icon>

【讨论】：

【解决方案2】：

最好的方法
快速修复

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

在您的 app.module.ts 中

然后在您的声明[]中声明 MatToolbarModule。

【讨论】：

记得将 MatToolbarModule 添加到导入部分。也许没有必要放入声明中

【解决方案3】：

在这里对我来说很好：https://stackblitz.com/edit/angular-w9ckf8

查看链接，看看是否缺少任何内容。

【讨论】：

我并没有真正得到区别，但似乎如果我将它导入 angular.module.ts 它可以工作，所以我会这样做

【解决方案4】：

在您的终端中运行 ng add @angular/material，这将修复您的错误

【讨论】：

【解决方案5】：

您需要从 '@angular/material/toolbar' 导入 import {MatToolbarModule}；并将其添加到导入数组中。材料的代码也在https://github.com/angular/components中维护。

【讨论】：

【解决方案6】：

我已经通过将 strict 设置为 false 解决了这个问题

打开

tsconfig.json

{ "compilerOptions" : { "strict" : false} }

注意：我也导入了 MatToolbarModule

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

并在 Imports 数组中声明

【讨论】：