'mat-label' 不是最新 Angular 材质中的已知元素错误答案

【问题标题】：'mat-label' is not a known element Error in latest Angular Material'mat-label' 不是最新 Angular 材质中的已知元素错误
【发布时间】：2018-06-01 01:42:41
【问题描述】：

我的 Angular 材质出现错误：

compiler.js:466 Uncaught Error: Template parse errors:
'mat-label' is not a known element:
1. If 'mat-label' is an Angular component, then verify that it is part of this module.
2. If 'mat-label' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
        </mat-form-field>
        <mat-form-field>
            [ERROR ->]<mat-label>Both a label and a placeholder</mat-label>
            <input matInput placeholder="Simple"):

问题：

Material Label 在 MatFormFieldModule Here's the link 下

现在，Angular Material 不知道 Mat-Label 问题的可能原因是什么。

这里是 HTML

<mat-form-field>
          <mat-label>Both a label and a placeholder</mat-label>
          <input matInput placeholder="Simple placeholder">
</mat-form-field>

【问题讨论】：

您是否检查过您的应用设置以及是否将CUSTOM_ELEMENTS_SCHEMA 导入app.module.ts？这应该可以解决问题并消除错误。 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 然后 schemas: [ CUSTOM_ELEMENTS_SCHEMA ], 在 @NgModule({...., schemas: [ CUSTOM_ELEMENTS_SCHEMA ]})
@k.vincent，这行得通，但它不应该要求这样做。更新 Angular 是一整天的工作 :( 伙计们，你可以做得更好
感谢@k.vincent 解决了我的问题
@CHAHISaad，很高兴它有帮助！

标签： angular typescript angular-material

【解决方案1】：

将@angular/material 升级到“5.2.0”，问题就会消失。

【讨论】：

【解决方案2】：

如果您有多个模块，请确保在每个模块中都导入 MatFormFieldModule。仅在根模块中导入是不够的。

例如，我有一个 CommonWidgetsModule，其中包含一些常见的小部件（我自己的），你会看到我正在导入 MatFormFieldModule 和 MatInputModule

// common-widgets.module.ts
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    RouterModule,

    MatFormFieldModule,
    MatInputModule,

    // import other MatModules...

  ],
  declarations: DECLARATIONS,
  exports: DECLARATIONS
})
export class CommonWidgetsModule { }

【讨论】：

而且你还需要添加MatInputModule以避免错误Error: mat-form-field must contain a MatFormFieldControl. (github.com/angular/material2/issues/7704)
我还必须在 app/root 模块中删除子模块（这里是 CommonWidgetsModule）。使用指令的组件也需要在子模块的声明中声明（这里是 CommonWidgetsModule）

【解决方案3】：

我还发现如果您使用 CLI 并说跳过导入。这将导致组件不会出现在您的模块中。所以它不会引用 mat 标签的导入。

【讨论】：

【解决方案4】：

在 app.module.ts 文件中添加

import {FormsModule} from "@angular/forms";

imports:[
FormsModule
]

FormModule 包含所有与表单相关的字段

【讨论】：

【解决方案5】：

也可能是您忘记在模块中添加组件（即已经导入 MatFormFieldModule 和 MatInputModule。

【讨论】：