Question

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

我在material.module.ts文件夹中创建了app：

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'以禁止显示此消息。

Answer 1

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

app.module.ts

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

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

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

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

Answer 2

在这里工作得很好：https://stackblitz.com/edit/angular-w9ckf8

查看链接，看看是否有任何遗漏。

Answer 3

最佳方式
快速修复

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

在您的app.module.ts

中

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

Answer 4

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

Answer 5

我已通过将严格设置为 false 来解决此问题

打开

<块引用>

tsconfig.json

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

注意：我也导入了 MatToolbarModule

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

并在 Imports 数组中声明

Answer 6

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

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

6 个答案: