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

Question

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

MatFormFieldModule is included in MatInputModule, so you don't need to import it again. — CornelC, May 14 '18 at 11:17

score 66 · Accepted Answer · edited Mar 31 '21 at 19:42

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

yes you are right i m try to this solution than my problem is solve thank man it's simple you save me +1 — Rohit Azad Malik, May 14 '18 at 11:13

score 25 · Answer 2 · answered May 14 '18 at 11:13

25

Try to import

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

in your module then inject into

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

answered May 14 '18 at 11:13

Sanoj_V

2,936
1
12
28

This solution worked for me to remove the error. But I'm not seeing buttons on the page, just the text. – amracel Sep 13 '18 at 11:49

score 15 · Answer 3 · edited Nov 02 '18 at 17:33

15

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

edited Nov 02 '18 at 17:33

Madhur Bhaiya

28,155
10
49
57

answered Nov 02 '18 at 17:13

technopia3321971

163
1
6

1

for me, it was enough to add MatInputModule - thanks : ) – Sofía Jun 21 '22 at 15:31

score 4 · Answer 4 · answered Sep 16 '19 at 06:21

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
  ]

score 2 · Answer 5 · edited Dec 26 '21 at 23:10

2

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

@NgModule({
  declarations: 
    [
      EducationModalComponent,
    ],

edited Dec 26 '21 at 23:10

answered Dec 14 '21 at 13:48

Keliz Zorrilla

41
3

anvyn · Answer 6 · 2022-08-01T08:49:16.660

1

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

edited Aug 01 '22 at 08:49

answered Aug 01 '22 at 08:48

anvyn

31
4

score 1 · Answer 7 · answered Jan 12 '23 at 14:41

1

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!

answered Jan 12 '23 at 14:41

Rohan Ayush

31
5

score 0 · Answer 8 · answered Apr 10 '19 at 17:12

0

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)

answered Apr 10 '19 at 17:12

asli

433
1
5
10

score 0 · Answer 9 · answered Sep 02 '20 at 21:05

0

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

answered Sep 02 '20 at 21:05

Jerry

46
6

score 0 · Answer 10 · answered Apr 08 '21 at 16:50

0

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

answered Apr 08 '21 at 16:50

geppy

101
1
3

score 0 · Answer 11 · answered Jul 11 '21 at 04:52

0

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.

answered Jul 11 '21 at 04:52

Kildareflare

4,590
5
51
65

Glad I answered here as I just had this issue again and solved the problem with this answer :0) – Kildareflare Jul 17 '21 at 06:01

score 0 · Answer 12 · answered Sep 02 '23 at 19:45

This entire thread needs to be cleaned up, as most people are just repeating the same 3 findings. What appears to be missing, is HOW one might go about correcting the issue when you are dealing with child or composite or standalone components. The issue and fix is actually the same, but you can waste hours if you are putting entries in the wrong place.

Addressing the missing modules in a STANDALONE component:

When I refer to a standalone component, I am speaking of a component in which much of the contents of the module file are included in the decorator of the component itself. They can be identified by the "standalone: true" property in the decorator.

@Component({
  imports: [
    MatFormFieldModule,
    ReactiveFormsModule,
    ...
  ],
  providers: [...],
  selector: 'mme-address-form',
  standalone: true, // NOTE:  This makes it standalone.
  styleUrls: ['./address-form.component.css'],
  templateUrl: './address-form.component.html'
})
export class AddressFormComponent ...

Now, there are several reasons why one should build components using the standalone model. By the same token, there are reasons why NOT to in certain cases. That is a topic for a different post. I prefer standalone -- most of the time.

With a standalone component, you import only what you need, and assume that very little will carry over from parent components or the app.module.ts file. If you think a module might be needed, include it. Then, when it is working correctly and ready to go, remark out modules in the imports section and omit any whose absence does not produce errors.

What about the ....module.ts file for my component?

If you are using the standalone model, you probably don't need a separate module file. The rule of thumb here, is look for the standalone property first! Adding items to a module file will have little to no effect on a standalone component, because it is -- well -- standalone. My devs used to complain that they added everything to the module file and it is still not compiling. If that's the case, ask yourself what I ask them rhetorically: "Is it perhaps a standalone component?"

Now, if it is indeed NOT a standalone component, a module file can be your best ally. They can be a little tricky to get right the first time through, but vscode, TS, and linters are gradually getting better about pointing out the inclusion rules you are overlooking. Consider the following in the case of using a standalone component:

@NgModule({
  declarations: [AddressFormComponent],
  exports: [...],
  imports: [
    CommonModule,
    MatFormFieldModule,
    ReactiveFormsModule,
    ...
  ]
})
export class AddressFormModule {}

You will probably get an error indicator on the AddressFormComponent entry in the declarations section saying something like "Component AddressFormComponent is standalone, and cannot be declared in an NgModule. Did you mean to import it instead?" When you see this and are working on the component in question, focus on its standalone configuration. When you see this and are NOT working on the component in question, move it from the declarations section to the imports section. Cannot find that pesky component when trying to make use of it on a form or in a parent component? Try adding it to the exports section as well.

This is by no means an exhaustive account of everything you should try, but hopefully it will help you to clean and reduce your code and get past such issues a little faster. :)

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

12 Answers12

Linked