Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

'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> 
like image 289
Randz67 Avatar asked Dec 18 '17 17:12

Randz67


People also ask

How to get rid of 'mat-list' error in angular?

If 'mat-list' is an Angular component, then verify that it is part of this module. 2. If 'mat-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" [ERROR ->] { {video.title}} "): ng:///DashboardModule/VideoDashboardComponent.html@0:0

How to suppress message 'mat-list-item is not a known element'?

If 'mat-list-item' is an Angular component, then verify that it is part of this module. If 'mat-list-item' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" "): ng:///DashboardModule/VideoDashboardComponent.html@1:2 'mat-list' is not a known element: 1.

What is ng8001 error in angular?

Error NG8001: Is Not a Known Element applies on every angular element and occurs when we forget to import that element directives from the angular source to our working component.ts file.

What is the error 466 in angular compiler?

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.


1 Answers

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 { } 
like image 139
Simon_Weaver Avatar answered Oct 06 '22 12:10

Simon_Weaver