'mat-label' is not a known element Error in latest Angular Material

Question

I got an error in my Angular Material:

compiler.js:466 Uncaught Error: Template parse errors:
'mat-label' is not a known element:
1. If 'mat-label' is an Angular component, then verify that it is part of this module.
2. If 'mat-label' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
        </mat-form-field>
        <mat-form-field>
            [ERROR ->]<mat-label>Both a label and a placeholder</mat-label>
            <input matInput placeholder="Simple"):

Question:

Material Label is under MatFormFieldModule Here's the link

Now, what is the possible cause of the issue why Mat-Label is unknown to Angular Material.

Here is the HTML

<mat-form-field>
          <mat-label>Both a label and a placeholder</mat-label>
          <input matInput placeholder="Simple placeholder">
</mat-form-field>

Did you check your app settings and if you're importing `CUSTOM_ELEMENTS_SCHEMA` in `app.module.ts`? This should fix the issue and remove the error. `import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';` and then `schemas: [ CUSTOM_ELEMENTS_SCHEMA ],` in @NgModule({...., schemas: [ CUSTOM_ELEMENTS_SCHEMA ]}) — k.vincent, Dec 19 '17 at 08:13
@k.vincent, that works, but it shouldn't require that. Updating Angular is full day work :( guys, you can do better — greengold, Jan 06 '18 at 15:11
Wow, upgrading from v9 to v12 (got to v11 when I got this error). Took me half a day to find this 'solution'. Not sure why adding Custom_Elements_Schema works, but it resolved the error. Thanks @k.vincent — Chip Michael, Mar 03 '22 at 23:38

score 68 · Answer 1 · edited Apr 18 '20 at 08:13

68

If you have multiple modules make sure you're importing the MatFormFieldModule in every module. It's not sufficient to just import it in the root module.

For example, I have a CommonWidgetsModule which contains some common widgets (my own) and you'll see I'm importing MatFormFieldModule and MatInputModule

// common-widgets.module.ts
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    RouterModule,

    MatFormFieldModule,
    MatInputModule,

    // import other MatModules...

  ],
  declarations: DECLARATIONS,
  exports: DECLARATIONS
})
export class CommonWidgetsModule { }

edited Apr 18 '20 at 08:13

grandouassou

2,500
3
25
60

answered Jul 06 '18 at 00:23

Simon_Weaver

140,023
84
646
689

8

And you need to also add `MatInputModule` to avoid the error `Error: mat-form-field must contain a MatFormFieldControl.` (https://github.com/angular/material2/issues/7704) – Simon_Weaver Jul 06 '18 at 00:32
I also had to imort the submodule (here CommonWidgetsModule) in the app/root module. Also the component using the directive needs to be declared in the declarations of the submodule (here CommonWidgetsModule) – patrickuhlmlann Jul 14 '21 at 22:08

score 3 · Answer 2 · answered Feb 13 '22 at 17:59

3

Could also be that you forgot to add your component in your module (that is already importing MatFormFieldModule and MatInputModule.

answered Feb 13 '22 at 17:59

Matthieu Riegler

31,918
20
95
134

1

saved me a headache, thanks mate :D – hullunist Jul 06 '22 at 06:44

score 1 · Answer 3 · edited Mar 03 '22 at 08:21

1

Make sure that you are importing MatFormFieldModule in 'app.module.ts' or respective module's 'module.ts' file.

@NgModule({ 
  imports: [
    BrowserModule, 
    FormsModule, 
    MatFormFieldModule,
  ],
})

edited Mar 03 '22 at 08:21

kelsny

23,009
3
19
48

answered Mar 02 '22 at 19:41

dexter._

51
2

I have imported these 3 already. But the error is coming. – Nimasha Madhushani Dec 31 '22 at 01:36

score 1 · Answer 4 · answered Sep 30 '22 at 16:19

be careful, if you want to use in a dialog

@see https://material.angular.io/components/dialog/overview

ok

<h1 mat-dialog-title>Favorite Animal</h1>
<div mat-dialog-content>
  My favorite animal is:
  <ul>
    <li>
      <span *ngIf="data.animal === 'panda'">&#10003;</span> Panda
    </li>
    <li>
      <span *ngIf="data.animal === 'unicorn'">&#10003;</span> Unicorn
    </li>
    <li>
      <span *ngIf="data.animal === 'lion'">&#10003;</span> Lion
    </li>
  </ul>
</div>

ko

<h1 mat-dialog-title>Favorite Animal</h1>
<div mat-dialog-content>
  <mat-label>My favorite animal is:</mat-label>
  <ul>
    <li>
      <span *ngIf="data.animal === 'panda'">&#10003;</span> Panda
    </li>
    <li>
      <span *ngIf="data.animal === 'unicorn'">&#10003;</span> Unicorn
    </li>
    <li>
      <span *ngIf="data.animal === 'lion'">&#10003;</span> Lion
    </li>
  </ul>
</div>

For this, you must create a new component, and not only a html template.

Sukh_Bains · Answer 5 · 2020-04-29T17:07:58.110

0

I also found if you use the CLI and say skip-import. This will then result in the component not appear in your module. So it will not reference back to the imports for the mat label.

edited Apr 29 '20 at 17:07

answered Apr 25 '20 at 11:04

Sukh_Bains

116
7

score 0 · Answer 6 · edited Nov 18 '21 at 18:07

0

in app.module.ts file add

import {FormsModule} from "@angular/forms";

imports:[
FormsModule
]

FormModule Includes all the Fields Related to Form

edited Nov 18 '21 at 18:07

ccpizza

28,968
18
162
169

answered Jun 21 '21 at 14:32

Mubeen Naeem

55
1
2

score 0 · Answer 7 · edited Mar 31 '23 at 04:00

0

Add the import

import {ReactiveFormsModule } from "@angular/forms";

edited Mar 31 '23 at 04:00

Suraj Rao

29,388
11
94
103

answered Mar 31 '23 at 03:43

Douglas Martins

1

score 0 · Answer 8 · answered Jun 04 '23 at 14:13

In my case, I have added the component name that uses <mat-form-field> and <mat-label> to the main app.module.ts declarations section. It is important to include the following modules as suggested in the previous answers: MatFormFieldModule, MatInputModule, and MatFormFieldModule.

score -3 · Answer 9 · answered Feb 12 '18 at 14:28

-3

Upgrade @angular/material to "5.2.0" and the problem will go away.

answered Feb 12 '18 at 14:28

Mateusz Stefek

3,478
2
23
28

'mat-label' is not a known element Error in latest Angular Material

9 Answers9

Linked

Related