Saltar al contenido

← Blog

Angular dentro de Astro: componentes como islas

Una integración poco conocida de Analog permite meter componentes de Angular en un sitio Astro, hidratando solo los que lo necesitan. Útil cuando la web es contenido con algunas piezas vivas.

De la misma gente que hace Analog sale un paquete del que se habla poco: @analogjs/astro-angular. Su descripción es de una línea — «usar componentes de Angular dentro de Astro» — y esconde una idea que encaja bien con el tipo de webs que hacemos.

Qué es una isla

Astro es un framework pensado para sitios rápidos centrados en contenido. Genera estático por defecto, y permite intercalar componentes dinámicos — las islas — que se hidratan por separado. El resto de la página llega como HTML y ahí se queda.

Lo que añade este paquete es que esas islas puedan ser componentes de Angular. No una app de Angular entera: los componentes sueltos que de verdad necesitan comportamiento.

Cómo se instala

Con el propio CLI de Astro:

npx astro add @analogjs/astro-angular

Eso instala el paquete, lo añade a astro.config.mjs y trae las dependencias necesarias para renderizar Angular en servidor y cliente. Además hay que crear un tsconfig.app.json en la raíz del proyecto, que es lo que la integración usa para compilar.

La versión actual es la 2.7.5, del 25 de septiembre, y acepta Angular 20 o 22. El paquete no es nuevo: existe desde agosto de 2022.

Qué acaba de cambiar

Las betas de Analog 2.8 le añaden proyección de contenido en los componentes isla. Es decir, poder pasarle contenido desde Astro a un componente de Angular en vez de limitarse a pasarle propiedades.

Cuándo lo usaríamos

Opinión nuestra. Buena parte de lo que nos piden es una web de contenido con dos o tres piezas vivas: un buscador, un formulario, un mapa. Montar eso como aplicación completa hace pagar a todos los visitantes el precio de una interactividad que casi ninguno usa.

La pega honesta: elegir esto es elegir Astro, no Analog. Son dos caminos distintos del mismo equipo, y la decisión va antes de escribir la primera línea. Si el sitio es sobre todo contenido, Astro con islas de Angular es una opción que merece estar sobre la mesa; si va a crecer hacia una aplicación, no.

Fuentes