Para qué sirve CUSTOM_ELEMENTS_SCHEMA en Angular
En Angular, el esquema CUSTOM_ELEMENTS_SCHEMA permite a la aplicación reconocer y usar elementos HTML personalizados (custom elements) que no están definidos en el propio componente ni en Angular. Este esquema es útil cuando trabajamos con Web Components o librerías externas que introducen nuevos elementos HTML que Angular no reconoce de forma nativa.
¿Por qué se necesita CUSTOM_ELEMENTS_SCHEMA?
Por defecto, Angular valida todos los elementos HTML usados en los templates para asegurarse de que son elementos conocidos y propios de Angular o HTML estándar. Si Angular encuentra un elemento desconocido (por ejemplo, <mi-elemento-personalizado>), lanzará un error de compilación indicando que el elemento no es reconocido.
CUSTOM_ELEMENTS_SCHEMA indica a Angular que puede ignorar estos elementos personalizados, evitando los errores de compilación y permitiendo que se rendericen en la aplicación.
Cómo usar CUSTOM_ELEMENTS_SCHEMA
Para permitir el uso de elementos personalizados en un módulo Angular, debes incluir CUSTOM_ELEMENTS_SCHEMA en la propiedad schemas del decorador @NgModule del módulo en el que se utilizarán los elementos personalizados. A continuación, se muestra cómo hacerlo:
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
schemas: [CUSTOM_ELEMENTS_SCHEMA], // Permitir elementos personalizados
bootstrap: [AppComponent]
})
export class AppModule { }Ejemplo de uso
Supongamos que has importado un Web Component llamado <mi-componente> en tu aplicación Angular y quieres usarlo en un template de algún componente:
<!-- Template de un componente en Angular -->
<mi-componente></mi-componente>
Sin CUSTOM_ELEMENTS_SCHEMA, Angular mostraría un error como "‘mi-componente’ is not a known element" (mi-componente no es un elemento conocido). Al añadir CUSTOM_ELEMENTS_SCHEMA en el módulo, Angular ignorará este error y permitirá que <mi-componente> se use sin problemas.
Consideraciones
- Precaución con elementos no reconocidos: Al permitir cualquier elemento personalizado, Angular puede pasar por alto posibles errores de escritura en el HTML, como nombres incorrectos en los elementos.
-
Rendimiento:
CUSTOM_ELEMENTS_SCHEMApuede tener un pequeño impacto en el rendimiento, ya que Angular ya no valida estos elementos personalizados. - Uso en producción: Es útil cuando se trabaja con Web Components o librerías de terceros que proveen componentes personalizados.
Conclusión
CUSTOM_ELEMENTS_SCHEMA en Angular es fundamental para integrar elementos personalizados sin que Angular los marque como errores, y permite trabajar con Web Components y otros elementos externos en las aplicaciones. Para más información, revisa la documentación oficial de Angular sobre CUSTOM_ELEMENTS_SCHEMA.
Jorge García
Fullstack developer