Update Guide v19 - IHK-GfI/lux-components-workspace GitHub Wiki

Update Guide 19

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: 19.0.0 -> 19.0.1 -> 19.1.0 -> 19.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 19
- Änderungen
  - Technische Änderungen
  - Optische Änderungen
- Versionen
  - Version 19.0.0

Änderungen

Technische Änderungen

Die Komponente LUX-File-List wurde als deprecated markiert. Bitte die Komponente LUX-File-Upload verwenden.

Optische Änderungen

ToDo

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 19.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.

Vor dem Update

Den Abschnitt Änderungen lesen!
LUX-Components auf die letzte Version 18.x.x (siehe Version 18.x.x) aktualisieren.
Node auf 18, 20 oder 22 (empfohlen) aktualisieren (siehe auch Ergänzung für JAST-Projekte).

Update

npm install -g @angular/cli@19
Die Datei package-lock.json löschen.
Die Abhängigkeit ngx-cookie-service in der package.json auf die Version 19.0.0 setzen, aber ohne ein npm install auszuführen.
In der Datei angular.json alle Vorkommen von ngx-build-plus: in @angular-devkit/build-angular: ersetzen.
Angular auf 19 aktualisieren:

ng update @angular/core@19 @angular/cli@19 --allow-dirty --force

Die Rückfrage nach dem use-application-builder bestätigen. Die Rückfrage nach dem provide-initializer bestätigen.

ng update @angular/cdk@19 @angular/material@19 @angular-eslint/schematics@19 --allow-dirty --force
LUX-Components-Updater aktualisieren:

npm install @ihk-gfi/lux-components-update@19 --save-dev --force
Updater ausführen:

ng g @ihk-gfi/lux-components-update:update-19.0.0
Imports anpassen:

ng g @ihk-gfi/lux-components-update:update-standalone-imports

Die Imports in den Testfällen (*.spec.ts) müssen manuell angepasst werden.
Die Datei package-lock.json und den Ordner node_modules löschen.
Abhängigkeiten aktualisieren:

npm install
(Optional): Die deutschen Übersetzungen der LUX-Components im Projekt aktualisieren:

npm run xi18n
(Optional): Die englischen Übersetzungen der LUX-Components im Projekt aktualisieren:

ng g @ihk-gfi/lux-components-update:update-en-messages
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
Es wird empfohlen die folgenen Schematics auszuführen:
- ng generate @angular/core:standalone-migration (Umstellung auf die neuen Standalone-Components)
- ng generate @angular/core:inject-migration (Umstellung auf die inject-Funktion, anstatt Konstruktor-Injektion)
- ng generate @angular/core:route-lazy-loading (Umstellung der Route auf Lazy Loading)
- ng generate @angular/core:cleanup-unused-imports (Importe aufräumen)
Anwendung vollständig testen.
Fertig!

Troubleshooting

Wenn der Fehler Can't find stylesheet to import beim Importieren von SCSS-Dateien aus dem node_module-Ordner auftritt, bitte den folgenden Abschnitt in der angular.json unterhalb von "styles": ["src/styles.scss"], hinzufügen:
```
"stylePreprocessorOptions": {
   "includePaths": ["node_modules/"]
 }
```
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.
JAST-Projekte: Falls der zentrale Build mit der folgenden Fehlermeldung abbricht: npm error /workspace/source/ui/node_modules/node-gyp-build-optional-packages/node-gyp-build.js, bitte die Node-Version hochziehen und den Parameter --no-optional entfernen (siehe Ergänzung für JAST-Projekte).

Ergänzung für JAST-Projekte

Falls eine neue Node-Version installiert wurde, muss diese auch in die zentralen Builds eingetragen werden. D.h. in der pipeline.yaml muss z.B. von node:18-alpine auf node:22-alpine umgestellt werden.
Bei der Umstellung auf eine neuere Node-Version sollte der Parameter --no-optional aus der pipeline.yaml entfernt werden.

Weiterführende Verweise bei Interesse oder Problemen

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.