“mat-toolbar”不是已知元素 - Angular 5

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,
    // ...
  ]
})

附注使用材质图标的正确方法是使用

MatIcon

组件。用法示例：

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

Answer 2

最好的方法
快速修复

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

在你的app.module.ts中

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

Answer 3

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

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

Answer 4

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

Answer 5

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

Answer 6

我遇到了同样的错误，我意识到这是我的错。 我收到此错误是因为我没有对 App 组件进行以下定义。

app.module.ts

@NgModule({
   declarations: [
     AppComponent,
     DataTableComponent,
     PeriodicComponent,
     HeaderComponent -- here is using MatToolbarModule.
   ],

首先，您必须将使用材质 dizany 组件的组件添加到声明数组中。

Answer 7

尝试在 VS Code 中升级或降级 Angular 服务扩展

名称：Angular 语言服务 描述：Angular 模板的编辑器服务 发行商： 角 VS 市场链接：这里

Answer 8

我在 app.module.ts 文件中添加了以下行

schemas: [CUSTOM_ELEMENTS_SCHEMA]

，它帮助我们解决了“mat-toolbar”组件的问题：

@NgModule({
  declarations: [..],
  providers: [..],
  bootstrap: [..],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

希望有人觉得这个建议有用，祝大家好运。

Answer 9

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

打开

tsconfig.json

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

注意： 我也导入了 MatToolbarModule

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

并在 Imports 数组中声明