显示给';MAT-FORM-FIELD';的角度6错误不是已知元素: [英] Angular 6 error show to 'mat-form-field' is not a known element:
本文介绍了显示给';MAT-FORM-FIELD';的角度6错误不是已知元素:的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
您好,我使用的是角度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. ("
为什么我会出现这个错误我不得不花很多时间来解决这个问题,但是在我错的地方没有得到任何解决方案,我还在这里搜索堆栈溢出,有些人找到了解决方案但没有解决我的问题,您能帮我找出这个错误吗
感谢您解决了我的问题
推荐答案
查看错误ng:///AppRoutingModule/LoginComponent.html@11:2
我可以得出结论,您在AppRoutingModule
中声明了LoginComponent
,但没有在那里导入MatFormFieldModule
。
将LoginComponent
移到AppModule
的declarations
数组:
@NgModule({
declarations: [
AppComponent,
LoginComponent
],
...
})
export class AppModule { }
或导入MatFormFieldModule
或AppRoutingModule
中的某些SharedModule
:
@NgModule({
declarations: [
LoginComponent,
...
],
imports: [
MatFormFieldModule // or SharedModule that exports MatFormFieldModule
...
]
...
})
export class AppRoutingModule { }
另请参阅:
这篇关于显示给';MAT-FORM-FIELD';的角度6错误不是已知元素:的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文