Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 489
Rohit Azad Malik Avatar asked May 14 '18 11:05

Rohit Azad Malik


People also ask

How do I fix mat form field is not a known element?

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

How do I fix error code NG8001?

Debugging the errorlinkUse the element name in the error to find the file(s) where the element is being used. Check that the name and selector are correct. Make sure that the component is correctly imported inside your NgModule or standalone component, by checking its presence in the imports field.

What is MatFormFieldControl?

MatFormFieldControl. An interface which allows a control to work inside of a MatFormField .

What is Mat Select trigger?

MatSelectTrigger. Allows the user to customize the trigger that is displayed when the select has a value.


1 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
like image 91
yurzui Avatar answered Oct 14 '22 12:10

yurzui