'mat-form-field' 的 Angular 6 错误显示不是已知元素：答案

【问题标题】：Angular 6 error show to 'mat-form-field' is not a known element:'mat-form-field' 的 Angular 6 错误显示不是已知元素：
【发布时间】：2018-10-24 00:30:38
【问题描述】：

您好，我使用的是 angular 6，我的代码如下：

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';




import { AppComponent } from './app.component';
import { AppRoutingModule } from './app.routing.module';


import { MatButtonModule, MatFormFieldModule, MatInputModule, MatRippleModule } from '@angular/material';
//import { MaterialModule } from 'src/app/et-shared/material.module';


const modules = [
  MatButtonModule,
  MatFormFieldModule,
  MatInputModule,
  MatRippleModule
];

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    RouterModule,
    AppRoutingModule,
   // MaterialModule,
   ...modules

  ],
  exports:[
    ...modules
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

和这样的html

<div class="example-container">
  <mat-form-field>
    <input matInput placeholder="Input">
  </mat-form-field>

  <mat-form-field>
    <textarea matInput placeholder="Textarea"></textarea>
  </mat-form-field>

  <mat-form-field>
    <mat-select placeholder="Select">
      <mat-option value="option">Option</mat-option>
    </mat-select>
  </mat-form-field>
</div>

我的包裹是这样的

"dependencies": {
    "@angular/animations": "^6.0.0",
    "@angular/cdk": "^6.0.1",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/forms": "^6.0.0",
    "@angular/http": "^6.0.0",
    "@angular/material": "^6.0.1",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/router": "^6.0.0",
    "core-js": "^2.5.4",
    "hammerjs": "^2.0.8",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },

我遇到了这个错误

'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

<div class="example-container">
  [ERROR ->]<mat-form-field>
    <input matInput placeholder="Input">
  </mat-form-field>
"): ng:///AppRoutingModule/LoginComponent.html@7:2
'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  </mat-form-field>

  [ERROR ->]<mat-form-field>
    <textarea matInput placeholder="Textarea"></textarea>
  </mat-form-field>
"): ng:///AppRoutingModule/LoginComponent.html@11:2
'mat-option' is not a known element:
1. If 'mat-option' is an Angular component, then verify that it is part of this module.
2. If 'mat-option' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  <mat-form-field>
    <mat-select placeholder="Select">
      [ERROR ->]<mat-option value="option">Option</mat-option>
    </mat-select>
  </mat-form-field>
"): ng:///AppRoutingModule/LoginComponent.html@17:6
'mat-select' is not a known element:
1. If 'mat-select' is an Angular component, then verify that it is part of this module.
2. If 'mat-select' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

为什么我会遇到这个错误我必须花费太多时间来解决这个问题但没有得到任何我错的解决方案我还在这里搜索堆栈溢出有些找到解决方案但不能解决我的问题你能帮忙吗我发现了这个错误

感谢您解决我的问题

【问题讨论】：

MatFormFieldModule 已包含在 MatInputModule 中，无需再次导入。

标签： angular angular-material angular6

【解决方案1】：

查看您的错误ng:///AppRoutingModule/LoginComponent.html@11:2

我可以得出结论，您在AppRoutingModule 中声明了LoginComponent，但没有在那里导入MatFormFieldModule。

将LoginComponent 移动到declarations 数组AppModule：

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent
  ],
  ...
})
export class AppModule { }

或在AppRoutingModule 中导入MatFormFieldModule 或一些SharedModule：

@NgModule({
  declarations: [
    LoginComponent,
    ...
  ],
  imports: [
    MatFormFieldModule // or SharedModule that exports MatFormFieldModule
    ...
  ]
  ...
})
export class AppRoutingModule { }

另见：

Use component from another module

【讨论】：

是的，你是对的，我尝试这个解决方案，而不是我的问题解决了，谢谢，这很简单，你救了我 +1

【解决方案2】：

尝试导入

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

在你的模块中然后注入

@NgModule({
//..your other property,
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 });

【讨论】：

这个解决方案对我有用，可以消除错误。但我在页面上看不到按钮，只有文字。

【解决方案3】：

我遇到了同样的问题，我的解决方法是 MatFormFieldModule、MatInputModule、MatSelectModule，添加到我的 Material 模块中

import { MatFormFieldModule, MatInputModule } from '@angular/material';

@NgModule({
    imports: [
        MatFormFieldModule,
        MatInputModule
    ]
})
export class AppModule { }

【讨论】：

【解决方案4】：

如果您有 2 个应用模块示例：app-routing.module.ts 和 app.module.ts 将 CommonModule 导入第二个 (app-routing.module.ts)

【讨论】：

【解决方案5】：

你需要导入MatSelectModule:

{MatSelectModule} from '@angular/material/select';

然后将其添加到导入数组中：

 imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    RouterModule,
    AppRoutingModule,
   // MaterialModule,
   ...modules,
   MatSelectModule
  ]

【讨论】：

【解决方案6】：

我也遇到了这个问题，这是由于重新下载/安装为我修复了它的无用安装..

ng 添加@angular/material

【讨论】：

【解决方案7】：

如果您使用的是 material-ui 组件，则有一个 api 选项卡可以让您知道需要将哪个模块导入到 app.module.ts 文件中。 https://material.angular.io/components/autocomplete/api

【讨论】：

【解决方案8】：

尽管加载了所有正确的模块，我也看到了这一点。

原来我忘记添加新组件，确保将其添加到模块的declarations 数组中。

【讨论】：

很高兴我在这里回答，因为我又遇到了这个问题并用这个答案解决了这个问题：0）

【解决方案9】：

对我来说，有必要在模块中声明组件。

@NgModule({
  declarations: 
    [
      EducationModalComponent,
    ],

【讨论】：