Salta al contingut

← Blog

Angular dins d'Astro: components com a illes

Una integració poc coneguda d'Analog permet posar components d'Angular en un lloc Astro, hidratant només els que ho necessiten. Útil quan el web és contingut amb algunes peces vives.

De la mateixa gent que fa Analog surt un paquet del qual es parla poc: @analogjs/astro-angular. La seva descripció és d'una línia — «fer servir components d'Angular dins d'Astro» — i amaga una idea que encaixa amb el tipus de webs que fem.

Què és una illa

Astro és un framework pensat per a llocs ràpids centrats en contingut. Genera estàtic per defecte, i permet intercalar components dinàmics — les illes — que s'hidraten per separat. La resta de la pàgina arriba com a HTML i allà es queda.

El que hi afegeix aquest paquet és que aquestes illes puguin ser components d'Angular. No una app d'Angular sencera: els components solts que de debò necessiten comportament.

Com s'instal·la

Amb el CLI del mateix Astro:

npx astro add @analogjs/astro-angular

Això instal·la el paquet, l'afegeix a astro.config.mjs i porta les dependències necessàries per renderitzar Angular al servidor i al client. A més cal crear un tsconfig.app.json a l'arrel del projecte, que és el que la integració fa servir per compilar.

La versió actual és la 2.7.5, del 25 de setembre, i accepta Angular 20 o 22. El paquet no és nou: existeix des de l'agost del 2022.

Què acaba de canviar

Les betes d'Analog 2.8 hi afegeixen projecció de contingut als components illa. És a dir, poder passar-li contingut des d'Astro a un component d'Angular en lloc de limitar-se a passar-li propietats.

Quan ho faríem servir

Opinió nostra. Bona part del que ens demanen és un web de contingut amb dues o tres peces vives: un cercador, un formulari, un mapa. Muntar això com una aplicació sencera fa pagar a tots els visitants el preu d'una interactivitat que gairebé cap fa servir.

La pega honesta: triar això és triar Astro, no Analog. Són dos camins diferents del mateix equip, i la decisió va abans d'escriure la primera línia. Si el lloc és sobretot contingut, Astro amb illes d'Angular és una opció que mereix ser sobre la taula; si ha de créixer cap a una aplicació, no.

Fonts