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

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