Oppgradering av en eldre Angular-applikasjon er sjelden en enkel oppgave. I dette tilfellet var den største utfordringen migreringen av komponenter fra Angular MDC Web til Angular Material, spesielt med de store endringene som kom i versjon 15. Dette blogginnlegget tar deg gjennom prosessen.
Litt om prosjektet
Prosjektet var et relativt standard Angular-prosjekt fra 2019, bygget med best practices fra den tiden. Front-end arkitekturen inkluderte blant annet:
- Angular MDC Web: Brukt for Material Design-komponenter, men avviklet til fordel for Angular Material.
- Routing-moduler: Strukturen var modulbasert med routingmoduler for hver hovedseksjon.
- Content- og Resolver-servicer: Brukt for å håndtere datalasting på en effektiv måte.
Det er alltid lurt å oppdatere jevnlig, men av ulike grunner befant vi oss for dette prosjektet langt bak den nyeste versjonen av Angular og bestemte oss i slutten av 2024 for at tiden var inne for å gjennomføre oppdateringen. Den største jobben var å erstatte nedlagte Angular MDC Web med Angular Material. Dette innebar omskriving av rundt 1200 forekomster i kodebasen.
Før oppdateringen
Før vi startet selve oppdateringen, gjorde vi forarbeid for å få oversikt og finne ut av hvordan prosessen kunne forenkles:
- Identifisere alle bruksområder av Angular MDC Web
- Skrive et script for å erstatte enkle tilfeller automatisk
- Gjøre manuelle tilpasninger for komplekse tilfeller
- Oppdatere dependencies gradvis
Selv med et script var det mange tilfeller hvor manuell omskriving var nødvendig, spesielt der MDC-komponentene hadde forskjellig API sammenlignet med Angular Material.
Underveis: Versjon 15 og Angular Material
Versjon 15 av Angular innebar en stor overgang i Angular Material, hvor komponentene ble migrert til Material Design Components for Web (MDC Web) basert styling. Dette betydde at applikasjonen måtte migreres til de nye komponentene for å unngå å ende opp med legacy-komponenter.
For å sikre en smidig overgang:
- Brukte Angular Material migreringsverktøyet der det var mulig.
- Refaktorerte kode der gamle komponenter ikke hadde en direkte erstatning.
- Testet hver enkelt modul etter oppdatering for å identifisere visningsfeil.
Etter oppdateringen
Etter at oppdateringen var fullført, gikk applikasjonen gjennom grundig testing for å fikse feil. De fleste feilene var visningsrelaterte, som margin, padding og stilendringer som påvirket layouten. Men hvilke feil andre vil få her avhenger selvfølgelig av hvilken funksjonalitet som finnes i deres applikasjon.
På dette tidspunktet var det også mulig å velge hvilken versjon av material design man ønsket å bruke i prosjektet. Angular Material støtter både Material Design 2 og Material Design 3. I skrivende stund mener jeg at Material Design 2 har best støtte for hva hva dette prosjektet hadde behov for, mens Material Design 3 sikkert blir bedre med tiden. Det vil være mulig å bytte fra versjon 2 til 3 på et senere tidspunkt. For øvrig finner man mer informasjon om dette landskapet på hjemmesidene til Angular Material eller i dette blogginnlegget: https://blog.angular.dev/the-future-of-material-support-in-angular-7fa0662ecc4b
Konklusjon
Å oppgradere en Angular-applikasjon fra versjon 10 til 19 var en stor, men overkommelig oppgave. Nøkkelinnsikter fra prosessen:
- Følg Angular sin offisielle guide og test jevnlig.
- Planlegg migreringen av store endringer som Angular Material i forkant.
- Bruk skript for å automatisere repetitive oppgaver.
- Test hver oppdatering for å unngå at feil hoper seg opp.
Denne erfaringen viser at store oppdateringer kan være krevende, men også en god anledning til å modernisere kodebasen og ta i bruk nye verktøy og best practices.