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

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

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

12

Best Answer

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

The 'mat form field is not a known element' error typically occurs when working with Angular forms. This error indicates that the 'mat-form-field' component is not recognized or imported correctly in your Angular project. To resolve this issue, you need to ensure that you have imported the necessary modules and dependencies.

Firstly, make sure that you have imported the 'MatFormFieldModule' in your Angular module file. You can do this by adding 'import { MatFormFieldModule } from '@angular/material/form-field';' to your imports array.

Additionally, check if you have imported the 'MatInputModule' as well. This module is required for the 'mat-form-field' component to work properly. Add 'import { MatInputModule } from '@angular/material/input';' to your imports array if it is missing.

If you have already imported these modules and the error still persists, make sure that you have installed the necessary dependencies. Run 'npm install @angular/material' to install the Angular Material package and its dependencies.

Once you have imported the required modules and installed the dependencies, the 'mat form field is not a known element' error should be resolved. You should now be able to use the 'mat-form-field' component without any issues in your Angular forms.

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]

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

@NgModule({declarations: [EducationModalComponent,],

In my case disabling Angular Language Service on VS Code resolved this issue. Non of above solutions didn't help.
P.S. All imports was right in app.module.ts

For me,I was implementing material dialog with mat-form-field inside a separate module, and I did not import that module in app.module.ts.

That was the issue. Added and its working fine!

If you have 2 App Module exmple : app-routing.module.ts and app.module.tsImports 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. https://material.angular.io/components/autocomplete/api

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.

Random Posts

ImportError: No module named sixUse String.contains in an Apex pageHow can you determine a point is between two other points on a line segment?What is the keyguard in Android?Does selenium IDE have a way to handle dynamic elements?Notepadd++ plugin sqlinform for SQL formatting bright orange color backgroundfatal error: Python.h: No such file or directoryfirebase deploy --only functions overrides existing functionsWhat is difference between monolithic and micro kernel?What is a NumberFormatException and how can I fix it?VIM Select Entire LineCould not find a declaration file for module 'react-dom/client'CloudFormation solution in Google CloudHow to remove items from a list while iterating?Store input box value and use as default valueFunctional programming vs Object Oriented programming [closed]How can I access objects under INFORMATION_SCHEMA in a DB in SnowflakeValueError: dictionary update sequence element #0 has length 1; 2 is requiredBest C++ Code Formatter/BeautifierHow can I read a SQS message using sqs-consumer inside an EC2 instance?