Update Guide v16

Update Guide 16

In diesem Update Guide wird beschrieben, wie man die LUX-Components aktualisieren kann. Es handelt sich um inkrementelle Updates. D.h. alle Updates müssen in der korrekten Reihenfolge (Beispiel: 16.0.0 -> 16.0.1 -> 16.1.0 -> 16.1.1 ->...) ausgeführt werden und es darf kein Update übersprungen werden, da jedes Update neben der Versionsaktualisierung in der package.json auch potenziell weitere wichtige Änderungen enthalten kann, die sonst fehlen würden.

• Update Guide 16
  • Versionen
    • Version 16.2.0
    • Version 16.1.0
    • Version 16.0.1
    • Version 16.0.0
      • Allgemein
      • Schnittstellenbrechende Änderungen
      • Vor dem Update
      • Update
      • Nach dem Update
      • Troubleshooting
      • Ergänzung für JAST-Projekte
      • Weiterführende Verweise bei Interesse oder Problemen
      • Erklärung

Versionen

In diesem Abschnitt wird beschrieben, wie man die LUX-Components aktualisieren kann. Alle Updates sind inkrementelle Updates. D.h. alle Updates müssen in der korrekten Reihenfolge ausgeführt werden und es darf kein Update übersprungen werden, da jedes Update, neben der Versionsaktualisierung in der package.json, auch potenziell weitere wichtige Änderungen enthalten kann, die sonst fehlen würden.

• Version 16.2.0
• Version 16.1.0
• Version 16.0.1
• Version 16.0.0

Version 16.2.0

In diesem Abschnitt wird beschrieben, wie man die LUX-Components aktualisieren kann. Alle Updates sind inkrementelle Updates. D.h. alle Updates müssen in der korrekten Reihenfolge ausgeführt werden und es darf kein Update übersprungen werden, da jedes Update, neben der Versionsaktualisierung in der package.json, auch potenziell weitere wichtige Änderungen enthalten kann, die sonst fehlen würden.

• LUX-Components-Updater aktualisieren:
  • npm update @ihk-gfi/lux-components-update
• LUX-Components-Updater ausführen:
  • ng generate @ihk-gfi/lux-components-update:update-16.2.0
• Wenn Probleme beim Ausführen von npm install mit den Abhängigkeiten (z.B. ng-build-plus, @angular-devkit/build-angular,...) auftreten sollten, bitte einmal den node_modules-Ordner und die package-lock.json-Datei löschen und noch einmal npm install ausführen.
• Fertig!

Version 16.1.0

In diesem Abschnitt wird beschrieben, wie man die LUX-Components aktualisieren kann. Alle Updates sind inkrementelle Updates. D.h. alle Updates müssen in der korrekten Reihenfolge ausgeführt werden und es darf kein Update übersprungen werden, da jedes Update, neben der Versionsaktualisierung in der package.json, auch potenziell weitere wichtige Änderungen enthalten kann, die sonst fehlen würden.

• LUX-Components-Updater aktualisieren:
  • npm update @ihk-gfi/lux-components-update
• LUX-Components-Updater ausführen:
  • ng generate @ihk-gfi/lux-components-update:update-16.1.0
• Wenn Probleme beim Ausführen von npm install mit den Abhängigkeiten (z.B. ng-build-plus, @angular-devkit/build-angular,...) auftreten sollten, bitte einmal den node_modules-Ordner und die package-lock.json-Datei löschen und noch einmal npm install ausführen.
• Fertig!

Version 16.0.1

In diesem Abschnitt wird beschrieben, wie man die LUX-Components aktualisieren kann. Alle Updates sind inkrementelle Updates. D.h. alle Updates müssen in der korrekten Reihenfolge ausgeführt werden und es darf kein Update übersprungen werden, da jedes Update, neben der Versionsaktualisierung in der package.json, auch potenziell weitere wichtige Änderungen enthalten kann, die sonst fehlen würden.

• LUX-Components-Updater aktualisieren:
  • npm update @ihk-gfi/lux-components-update
• LUX-Components-Updater ausführen:
  • ng generate @ihk-gfi/lux-components-update:update-16.0.1
• Wenn Probleme beim Ausführen von npm install mit den Abhängigkeiten (z.B. ng-build-plus, @angular-devkit/build-angular,...) auftreten sollten, bitte einmal den node_modules-Ordner und die package-lock.json-Datei löschen und noch einmal npm install ausführen.
• Fertig!

Version 16.0.0

Allgemein

Bitte zuerst die vollständige Anleitung lesen und danach mit dem Update beginnen. Das Update sollte auf einem separaten Branch durchgeführt werden und nicht direkt auf dem Develop-Branch.

Schnittstellenbrechende Änderungen

• Die Weiterentwicklung des Flex-Layouts (@angular/flex-layout) wurde von Google eingestellt. D.h. das Flex-Layout muss aus allen HTML-Templates entfernt werden.
• Für die ToDos nach der Migration empfehlen wir folgende Liste der Austauschmöglichkeiten für die entfallenen Direktiven.
• Hier ist eine Übersicht über alle neuen Styling-Klassen.

Vor dem Update

1. Den Abschnitt Schnittstellenbrechende Änderungen lesen!
2. LUX-Components auf die letzte Version 15.x.x (siehe Version 15.x.x) aktualisieren.
3. Node.js 18.x.x oder 20.x.x (bitte ausschließlich LTS-Versionen verwenden) aktualisieren und ab sofort verwenden.

Update

1. npm install -g @angular/cli@16

2. Die Datei package-lock.json löschen.

3. Angular auf die letzte 15 aktualisieren:

   ng update @angular/core@15 @angular/cli@15 @angular/cdk@15 @angular/material@15 @angular-eslint/schematics@15 ngx-build-plus@15 --allow-dirty --force

   Der obige Befehl führt am Ende automatisiert ein npm install aus. Dabei können Abhängigkeitsfehler in die Console geloggt werden. Diese können aber ignoriert werden. Details siehe Erklärung. Dies gilt bis Schritt 7. Ab Schritt 7 dürfen keine Abhängigkeitsfehler mehr auftreten.

4. Die Abhängigkeit @angular/flex-layout aus der package.json löschen.

5. Die Abhängigkeit ngx-cookie-service auf die Version 16.0.0 setzen.

6. Angular auf 16 aktualisieren:

   ng update @angular/core@16 --allow-dirty --force

   ng update @angular/cli@16 @angular/cdk@16 @angular/material@16 @angular-eslint/schematics@16 ngx-build-plus@16 --allow-dirty --force

7. LUX-Components-Updater aktualisieren:

   npm install @ihk-gfi/lux-components-update@16 --save-dev --force

8. Updater ausführen:

   ng g @ihk-gfi/lux-components-update:update-16.0.0

9. Die Datei package-lock.json und den Ordner node_modules löschen.

10. Abhängigkeiten aktualisieren:

    npm install

11. Jetzt muss manuell das Flex-Layout auf den HTML-Templates entfernt werden. Siehe Schnittstellenbrechende Änderungen.

    1. Die Importe import { FlexLayoutModule } from '@angular/flex-layout'; entfernen.
    2. Alles mit fx... aus den HTML-Templates.
    3. Alle ngClass mit MediaQuery, wie z.B. [ngClass.lt-md]
    4. ...

12. (Optional): Die deutschen Übersetzungen der LUX-Components im Projekt aktualisieren:

    npm run xi18n

13. (Optional): Die englischen Übersetzungen der LUX-Components im Projekt aktualisieren:

    ng g @ihk-gfi/lux-components-update:update-en-messages

14. Fertig!

Nach dem Update

• Falls es eigene Abhängigkeiten im Projekt gibt, die nicht über den LUX-Components-Updater aktualisiert wurden, sollten diese jetzt ebenfalls aktualisiert werden.

• Einen Smoketest (build, lint und test) ausführen:

  npm run smoketest

• Anwendung vollständig testen.

• Fertig!

Troubleshooting

• Falls beim Lint-Aufruf (npm run lint) der Fehler 1:1 error Definition for rule 'jsdoc/newline-after-description' was not found jsdoc/newline-after-description auftritt, dann ändert den Wert jsdoc/newline-after-description zu off in der .eslintrc.json.
• Falls noch entryComponents im Projekt vorhanden sind, können diese bedenkenlos gelöscht werden.
• Die Meldung Could not find Angular Material core theme. Most Material... in der Browser-Console kann ignoriert werden. Das Theme ist ausgelagert, funktioniert aber tadellos. Nur der Checker erkennt das leider nicht und schreibt diese Warnung in die Browser-Console raus.
• Sollte die Fehlermeldung Error: PostCSS received undefined instead of CSS string auftreten, dann gibt es einen leeren Styles-Eintrag (styles: [''] bzw. styles: [""]) in einer Komponente (im @Component-Block einer TypeScript-Datei). Einfach danach suchen und löschen.
• Die Meldung Type '""' is not assignable to type 'LuxThemePalette'. kann behoben werden, in dem man '' durch undefined ersetzt. Der Leerstring ist kein gültiger Wert von LuxThemePalette.

Ergänzung für JAST-Projekte

• Die neue Node-Version 18.x.x oder 20.x.x muss in die zentralen Jenkins-Builds eingetragen werden.

Weiterführende Verweise bei Interesse oder Problemen

• Angular Update Guide

Erklärung

Die Angular-Updater installieren immer die aktuellsten Versionen. D.h. wenn eine neue Angular-Version erscheint und der LUX-Components-Updater noch nicht angepasst wurde, dann kommt es dazu, dass der LUX-Components-Updater eine ältere Version installieren möchte. Das scheitert an der package-lock.json, weil dort die neueren Versionen bereits festgelegt sind. Aus diesem Grund wird hier die Option --force angegeben.