Com Actualitzar una Aplicació Angular

Introducció

Actualitzar Angular és a priori una tasca senzilla. No obstant això, de vegades pot convertir-se en un mal de cap. En aquest article t’explicaré com actualitzar la teva aplicació Angular a una major version.

Suport de la teva versió actual

El primer pas imprescindible és saber on et trobes. Consulta la documentació oficial d’Angular. Si la teva versió no té suport, és recomanable que actualitzis a una versió que tingui suport com més aviat millor. Estar fora de suport deixa la teva aplicació vulnerable a atacs i vulnerabilitats de seguretat.

En cas que la versió a la qual vulguis actualitzar sigui l’última, et recomano que esperis un temps prudencial de 2-3 mesos perquè s’estabilitzi si estàs en un entorn empresarial.

Com saber la versió d’Angular que tinc?

Per saber la versió d’Angular que tens a la teva aplicació, pots executar la següent comanda a la terminal dins de la carpeta de la teva aplicació:

ng --version

També pots consultar el fitxer package.json de la teva aplicació. A la secció de dependencies trobaràs la versió d’Angular que tens instal·lada:

"dependencies": {
  "@angular/animations": "^18.1.1",
  "@angular/common": "^18.1.1",
  "@angular/compiler": "^18.1.1",
  "@angular/core": "^18.1.1",
  "@angular/forms": "^18.1.1",
  "@angular/platform-browser": "^18.1.1",
  "@angular/platform-browser-dynamic": "^18.1.1",
  "@angular/router": "^18.1.1",
  "rxjs": "~7.8.0",
  "tslib": "^2.3.0",
  "zone.js": "~0.14.2"
  }

Guia oficial

A la web oficial d’Angular hi ha una guia d’actualització que t’explica com actualitzar des d’una versió Y fins a una versió Z. Pots trobar l’enllaç a la documentació oficial d’Angular. La guia és molt recomanable ja que t’explica pas a pas com actualitzar la teva aplicació Angular. Et deixo alguns enllaços amb detalls per a la majoria dels casos:

La gran majoria de passos comuns en totes les versions són:

Actualitzar versió de TypeScript
Actualitzar la versió de Node
Actualitzar Angular CLI
Actualitzar Angular Core

Migracions

Què és una migració en Angular?

Depenent de la versió, tindràs accés a noves funcionalitats que pots aprofitar. Implementar aquestes funcionalitats implica modificar el teu codi base en molts llocs de l’aplicació.

Per estalviar temps i errors humans, l’equip d’Angular ha creat migracions automàtiques. Aquestes migracions són scripts que s’executen a l’aplicació i modifiquen el codi base de forma automàtica.

Llibreries de tercers

Si la teva aplicació Angular utilitza llibreries de tercers, és possible que hagis d’actualitzar-les també. És important que consultis la documentació de les llibreries de tercers que utilitzes per saber si són compatibles amb la nova versió d’Angular. Algunes de les llibreries més comunes a tenir en compte:

En aquest punt és on més bloquejos solen sorgir. Si una llibreria de tercers no és compatible amb la nova versió d’Angular, hauràs de buscar una alternativa o esperar que la llibreria s’actualitzi.

A causa d’aquestes dependències, és millor esperar que les llibreries de tercers s’actualitzin abans d’actualitzar Angular i esperar un temps prudent de 2-3 mesos perquè es estabilitzin.

Planificació de l’actualització

He vist que moltes vegades a les empreses aquesta part passa molt desapercebuda. És important que planifiquis l’actualització d’Angular i que tot l’equip estigui alineat. Els mateixos desenvolupadors tendim a pensar que és un procés trivial i sense importància. No ho és.

1. Reunir la informació

Abans d’actualitzar, necessites reunir tota la informació possible. Consulta la documentació oficial d’Angular, la guia d’actualització, la llista de funcionalitats i la llista de migracions.

Amb tota aquesta informació l’equip pot fer-se una idea de les implicacions de l’actualització i estimar els temps necessaris per dur-la a terme i prioritzar-la o no durant les sessions de Sprint Planning.

2. Funcionalitats

A Angular hi ha moltes funcionalitats noves que es divideixen en tres tipus:

Estable: Llistes per a producció. Segueixen polítiques de compatibilitat, deprecació i suport.
Developer Preview: Totalment funcionals i polides, però no estan llestes per estabilitzar-se sota la política normal de deprecació.
Experimental: Podrien no arribar a ser estables o tenir canvis significatius abans d’estabilitzar-se.

La meva opinió sempre és que implementis les funcionalitats estables. Les altres dues categories poden canviar. Si això passa el millor que pot passar és haver de reescriure codi. El pitjor és que la teva aplicació deixi de funcionar en punts crítics perquè finalment la funcionalitat es descarta.

Personalment, consulto la llista de funcionalitats aquí. Aquest lloc web fa seguiment de les funcionalitats d’Angular i et diu si estan llestes per a producció o no de forma gràfica i ràpida.

3. Entorns

Necessites sí o sí els següents entorns:

Desenvolupament: Pots provar les noves funcionalitats i migracions. Sol ser el teu entorn local.
Preproducció/Test: Pots provar l’aplicació amb dades reals que vinguin de producció.

L’entorn de test és el més important. És el que més s’assembla a producció. Si alguna cosa falla en preproducció, fallarà en producció.

Execució de l’actualització

1. Aplicar actualitzacions

En aquest punt el que t’interessa és que la teva aplicació segueixi funcionant. No et preocupis per les noves funcionalitats. L’objectiu és passar amb el bàsic.

El més recomanable és que facis una branca nova al teu repositori i vagis aplicant els canvis de la guia en aquesta branca. No ho facis a la branca principal.

Segueix la guia oficial d’actualització i no et saltis cap pas. Comença per TypeScript, segueix per Node, Angular CLI i Angular Core.

Després, aplica les actualitzacions corresponents a les llibreries de tercers si aplica. Abans d’aplicar les actualitzacions, has de tenir les actualitzacions del core d’angular estables. Si no pot passar-te que no sàpigues si l’error és d’Angular o de la llibreria de tercers.

2. Estabilitza

És possible que sorgeixin errors a l’aplicació. Estabilitza el codi abans de seguir endavant. Un bon conjunt de proves unitàries i end-to-end t’ajudaran a detectar errors. Com més automatitzades estiguin les proves, millor.

Aquí els desenvolupadors tendim a refactoritzar codi. No ho facis. L’objectiu és que l’aplicació segueixi funcionant. Cada vegada que tinguis alguna cosa estable, fes un commit i segueix endavant. Progressiu i constant.

3. Proves

Un cop el codi està estable és moment de fer les proves funcionals. Des del meu punt de vista les accions que s’han de dur a terme són:

Desplegar el codi en un entorn de preproducció.
Provar amb dades que poden ser fictícies o modificades. Han de tenir la mateixa estructura i contingut que en producció.
Provar les funcionalitats crítiques de l’aplicació.
No barrejar noves funcionalitats durant l’actualització.

A això se li diu proves de regressió. L’objectiu és que l’aplicació segueixi funcionant igual que abans de l’actualització. A nivell més granular les proves funcionals que aconsello realitzar són:

Seguretat (autenticació i autorització)
Formularis
Modals
Desplegables
Visualització de dades
Proves de rendiment
CSS i estils

En les proves és imprescindible que col·laborin equips de desenvolupament, QA i negoci. Cadascun té una perspectiva diferent de l’aplicació. Els desenvolupadors som responsables de dir a l’aplicació el que fa. Els QA són responsables de dir si l’aplicació fa el que ha de fer. Negoci és responsable de dir si l’aplicació fa el que ha de fer per a l’usuari final.

El codi és responsabilitat de tots.

4. Desplegament

Un cop les proves funcionals han passat amb èxit, és moment de desplegar l’aplicació en producció. És recomanable que facis un desplegament en un horari de baixa activitat. Si alguna cosa falla, tindràs temps per solucionar-ho. També és important que tinguis un pla de contingència. Si alguna cosa falla, has de poder tornar a la versió anterior. El que típicament anomenem un rollback.

En els següents 4-5 dies serà fonamental monitoritzar l’aplicació. És possible que sorgeixin errors que no s’han detectat en les proves. Si això passa cal solucionar-los com més aviat millor. Per això assegura’t de tenir tot l’equip alineat amb una bona comunicació i donar prioritat als errors crítics.

5. Post-desplegament

Un cop l’aplicació està molt estable serà moment de valorar i implementar les noves funcionalitats si així ho decideix l’equip. És important que les implementis d’una en una. No implementis totes les funcionalitats alhora. Si implementes totes les funcionalitats alhora i alguna cosa falla, no sabràs què ha fallat.

Conclusions

Les següents conclusions són les que he extret de la meva experiència:

Separa el gra de la palla. No totes les funcionalitats són necessàries.
Actualitzar Angular és un procés que requereix temps i planificació.
Sembla un procés trivial.
Tot l’equip ha d’estar alineat.
Fes proves funcionals i de regressió.
Tingues un pla de contingència.
Monitoritza l’aplicació.
No barregis noves funcionalitats durant l’actualització.