Angular 6 error show to 'mat-form-field' is not a known element:

Hi I am using angular 6 and my code is as follows:

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 { } 

and html like this

<div> <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> 

my package like this

"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" }, 

and I get to this error

'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> [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. (" 

why I get to this error I have to spend too many times to resolve to this but not getting any solution where I am wrong I also search to stack overflow here some find the solution but not resolve to my problem can you please help me find out to this error

Thanks for solving my problem

9 Answers

Looking at your error ng:///AppRoutingModule/LoginComponent.html@11:2

I can conclude that you declared LoginComponent in AppRoutingModule but didn't import MatFormFieldModule there.

Either move LoginComponent to the declarations array of AppModule:

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

or import MatFormFieldModule or some SharedModule in AppRoutingModule:

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

See also:

• Use component from another module

Try to import

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

in your module then inject into

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

I had the same problem, the fix for me is MatFormFieldModule, MatInputModule, MatSelectModule, added to my Material module

import { MatFormFieldModule, MatInputModule } from '@angular/material'; @NgModule({ imports: [ MatFormFieldModule, MatInputModule ] }) export class AppModule { } 

You need to import MatSelectModule:

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

then add it to the imports array:

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

If you have 2 App Module exmple : app-routing.module.ts and app.module.ts Imports CommonModule to the seconde one (app-routing.module.ts)

I also had this problem, It was down to a dud install of material re-downloading / Installing fixed it for me..

ng add @angular/material

If you are using a material-ui component there is an api tab that will let you know what module you need to import into your app.module.ts file.

I was also seeing this despite having all the correct modules loaded.

Turns out I had forgotten to add the new component make sure to add it to the declarations array for the module.

For me it was necessary to declare the component in the module.

@NgModule({ declarations: [ EducationModalComponent, ],