Búsqueda de sitios web

typescript - 'mat-label' no es un elemento conocido Error en la última versión de Angular Material


Recibí un error en mi 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"): 

Pregunta:

La etiqueta de material está bajo MatFormFieldModule. Aquí está el enlace

Ahora, ¿cuál es la posible causa del problema por el cual Mat-Label es desconocido para Angular Material?

Aquí está el HTML

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

Respuesta #1

Si tienes múltiples módulos, asegúrate de estar importando el MatFormFieldModule en cada módulo. No es suficiente con solo importarlo en el módulo raíz.

Por ejemplo, tengo un CommonWidgetsModule que contiene algunos widgets comunes (propios) y verás que estoy importando MatFormFieldModule y 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 { }

Respuesta #2

También podría ser que olvidaste agregar tu componente en tu módulo (que ya está importando MatFormFieldModule y MatInputModule.

Artículos relacionados