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>
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
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.
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.
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 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 { }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With