Heute gibt es mal einen nicht ganz uneigennützigen Beitrag. Seit mehreren Wochen habe ich nichts mehr mit Angular gemacht. Meine Spielwiese dümpelt so vor sich hin, weil ich mich entweder mit anderen Projekten & Technologien beschäftigt habe oder weil ich einfach nach einem langen Arbeitstag keinen Elan mehr dazu hatte.

Jetzt habe ich mehr oder weniger zufällig mitbekommen, dass Angular 12 veröffentlich wurde. Zu meinem Glück habe ich ja nur sehr einfache Projekte, bei denen man nicht unbedingt gleich alles kaputt macht bei einem Update, doch mein letztes Update ist schon ein wenig her und ich konnte mich nicht erinnern, welche Schritte ich da durchgeführt habe.

Die Roadmap für’s Update

Aber in jedem Projekt habe ich fast eine Textdatei mit irgendwelchen Befehlen um irgendwas zu prüfen. Wäre nicht eine zentrale Stelle mal ganz praktisch, wo man nachschlagen kann? Here you are …

Vorab ist es natürlich sinnvoll sich über ‚breaking changes‘ zu informieren. Da leitet Google einem ganz schnell auf diese Seite: https://angular.io/guide/updating-to-version-12

NodeJS

Nachdem ich schon länger nichts mehr mit dem Projekt gemacht habe, habe ich erst mal meine NodeJS Version geprüft. Welche Version ist aktuell installiert?

node -v

Die einfachste Möglichkeit für ein Update unter Windows: Man lädt sich den aktuellen Installer herunter: nodejs.org

Typescript

Weiter geht’s mit Typescript. Auch hier lässt sich die installiert Version mit einem einfachen Befehl herausfinden

tsc -v

Eben so einfach lässt sich das Update durchführen

npm install -g typescript

Nach wenigen Sekunden war das Update von 4.0.5. auf 4.3.4 durchgeführt

NPM Package Manager

Die letzte Abhängigkeit auf meiner Liste war der NPM Package Manager. Auch hier lässt sich wieder mit einem einfachen Befehl die Version prüfen

npm -v

Mit dem Update habe ich aber irgendwie immer Probleme, wobei man an sich auch nur folgendes Statement ausführen müsste

npm install -g npm@latest

Ich muss aber immer einige Dateien manuell aus meinen Program Files löschen, weil er trotz des Parameters ‚–force‘ die irgendwie nicht ersetzten mag.

Angular 12

Und nun sind wir auch schon an dem Punkt um unsere Angular Version zu aktualisieren. Nachdem ich die Version geprüft habe, spuckt mir ein weiterer Befehl eigentlich aus, was alles zum aktualisieren ansteht

ng v
ng update

Im aktuellen Fall waren es

ng update @angular/cli --allowDirty=true --force
ng update @angular/core --allowDirty=true --force
ng update @angular/cdk --allowDirty=true --force
ng update @angular/material --allowDirty=true --force

(Ich habe nach jedem Schritt die Version geprüft. Der Core wurde mit CLI vermutlich schon aktualisiert)

Fazit

Das hat so wieder einigermaßen geklappt. Wenn ich ein größeres Projekt hätte wäre ich da aber vermutlich etwas vorsichtiger mit irgendwelchen –force Parametern und ich würde mich mehr mit den breaking changes beschäftigen. Deployed habe ich es auch schon, auch wenn die ‚Spielwiese‘ fast keine Daten enthält.
Aber jetzt kann ich vielleicht auch mal die anderen Projekte aktualisieren.