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

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>

Solution 1:^[1]

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

Solution 2:^[2]

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

Solution 3:^[3]

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

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

Solution 4:^[4]

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.

Solution 5:^[5]

in app.module.ts file add

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

imports:[
FormsModule
]

FormModule Includes all the Fields Related to Form

Solution 6:^[6]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	grandouassou
Solution 2	Matthieu Riegler
Solution 3	hittingonme
Solution 4
Solution 5	ccpizza
Solution 6	Mateusz Stefek

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]