Elemento Angular: Usar componentes de Angular fuera de Angular

por

Todos estamos familiarizados con los componentes: el bloque de construcción más poderoso en el ecosistema de Angular. Los componentes son donde el Dom se renderiza, los servicios se inyectan, las vistas se re-renderizan con detección de cambios. Los componentes pueden tomar valores como entradas y desencadenar eventos como salidas. Pero el problema es que este hermoso bloque hasta ahora sólo funciona dentro de un ecosistema Angular. Me gustaría que pudiéramos ayudar a la humanidad utilizando componentes angulares incluso fuera del ecosistema angular.

¡Sí! Desde Angular 7, Angular trae la característica «Elemento Angular». Ahora un componente angular puede ser exportado como un componente web independiente. Podemos utilizarlo exactamente como una etiqueta HTML típica como div o span, en cualquier página HTML, CMS o incluso dentro de un proyecto React o Vue.js.

Cómo funciona:

foto:

foto:

El componente web es un estándar web para definir un nuevo elemento HTML personalizado en el navegador. Los navegadores mantienen un registro llamado customElementRegistry . Usando el método CustomElementRegistry.define() podemos registrar una «cadena dom» y una clase que defina su comportamiento.

El paquete @angular/elements de Angular expone el método createCustomElement que convierte el componente de Angular y sus dependencias en una clase compatible como componente web.

Actualmente, el estándar web está soportado por todos los navegadores Chrome, Firefox, Safari y Opera. También podemos hacer que funcione en otros navegadores utilizando polyfills.

Casos de uso:

Hay al menos 3 casos de uso en los que podemos hacer uso de componentes angulares exportables totalmente funcionales como componentes web:

  • Micro front end
  • Migración de código
  • Plug &play de componentes web para servicios de terceros

Micro front end:

Al igual que el micro-servicio, existe otro concepto similar llamado micro-frontend. En una arquitectura micro-frontend, un pequeño equipo full-stack es responsable de entregar no sólo las APIs sino también sus correspondientes componentes front-end. Por ejemplo, el «equipo de productos» creará las API de productos y todas las vistas relacionadas con los productos que se utilizan en las diferentes páginas de categorías, la página de detalles del producto, la página de pago del carrito &. En un caso como este, todos los equipos proporcionarán diferentes componentes web y un equipo de front-end sólo pegará esos componentes en diferentes páginas.

Migración:

Los proyectos escritos en Angular 1.x, la migración a Angular siempre ha sido un reto. No hay un hechizo mágico fácil como ng update. Lo mismo es cierto para un caso en el que alguien quiere migrar su proyecto a Angular de React o Vue. Los componentes web son la mejor opción en este caso. Pueden convertir gradualmente sus componentes/controladores existentes a componentes web de Angular y reemplazarlos desde el sistema existente. Una vez que todos los componentes/controladores se convierten pueden simplemente reemplazar el sistema heredado con el último angular.

Servicios de terceros:

Los proveedores de servicios pueden proporcionar componentes web plug &play para ser pegados en el sitio web de su cliente sin ninguna ingeniería adicional necesaria.

Así que parece que es prometedor si realmente podemos enviar un componente angular como un componente web. Así que vamos a hacer nuestras manos sucias con la codificación real.

Proyecto de ejemplo:

Aquí está un código de ejemplo que escribimos un componente web de mi lista de tareas. FYI usted puede comprobar el código completo aquí en Github.

Paso 1: Escribir el componente y el servicio

  • Un componente TodoList para mostrar una lista de todos.
  • Un TodoService para obtener todo’s de placeholder JSON API.
  • El componente TodoList tomará «nombre» como entrada.
  • El componente TodoList activará el evento onTodoComplete cuando alguna tarea sea marcada como realizada.
todo-list.component.ts

todo-list.component.ts

https://github.com/asad-mlbd/example-ng-element/blob/master/src/app/todo-list/todo-list.component.ts
todo.service.ts

todo.service.ts

https://github.com/asad-mlbd/example-ng-element/blob/master/src/app/todo-list/todo.service.ts

Paso 2: Ajustar app.modules para exportar el componente todo-list

  • Dado que el proyecto se utilizará únicamente para exportar módulos angulares como componente web no necesitamos el bootstrapping a través del componente app.
  • Tenemos que declarar nuestro componente exportable TodoList como componentes de entrada.
  • Instalar el paquete @angular/elements.
  • Dentro del hook ngDoBootstrap utilizamos el método createCustomElement para compilar nuestro componente TodoList como un componente web estándar.
  • El componente TodoList tiene dependencia de TodoService. Como se utilizará fuera del ecosistema angular, necesitamos pasar el Inyector de Dependencias manualmente para que pueda cargar las dependencias.

https://github.com/asad-mlbd/example-ng-element/blob/master/src/app/app.module.ts

Paso 3: Bundling

  • Ahora si ejecutamos el build – se generarán archivos en la carpeta «dist». Ya que queremos utilizar esto en otro ecosistema mejor concatenar los archivos como un archivo de salida. Así que añade estos comandos en la sección de script package.json:-

"concat-es5": "concat -o output/output-es5.js ./dist/example-ng-element/runtime-es5.js ./dist/example-ng-element/polyfills-es5.js ./dist/example-ng-element/scripts.js ./dist/example-ng-element/main-es5.js","concat-es2015": "concat -o output/output-es2015.js ./dist/example-ng-element/runtime-es2015.js ./dist/example-ng-element/polyfills-es2015.js ./dist/example-ng-element/scripts.js ./dist/example-ng-element/main-es2015.js","concat": "npm run concat-es5 && npm run concat-es2015","build": "ng build --prod --output-hashing=none && npm run concat",
  • Ahora si ejecutamos el comando npm run build se generarán dos archivos separados output-es5.js y output-es2015.js dentro de la carpeta de salida.

Paso 4: Usar como componente web

  • Ahora todo está listo. Podemos utilizar estos archivos de salida como nuestro componente web independiente así:-

https://github.com/asad-mlbd/example-ng-element/blob/master/output/index.html
  • Si ejecutamos esta página HTML, podemos ver que la lista de cosas será obtenida y mostrada.
  • Si pasamos el nombre como entrada, podemos ver el nombre dentro del componente web – lo que significa que la entrada del componente y la detección de cambios están funcionando. Así que el evento de salida está trabajando también!

Así, como esto, podemos utilizar un componente angular en cualquier otro proyecto. Puedes probar tú mismo clonando el código desde Github.

Ref:

  • https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
  • https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry
  • https://angular.io/guide/elements

Deja un comentario