Skip to content

Update Guide v11

Jump to bottom
Thomas Dickhut edited this page Mar 12, 2024 · 1 revision

Update Guide 11

In diesem Update Guide wird beschrieben, wie man die LUX-Components auf eine neue Version aktualisieren kann.

Versionen

Version 11.14.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-11.14.0
  • Fertig!

Version 11.13.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-11.13.0
  • Fertig!

Version 11.12.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-11.12.0
  • Fertig!

Version 11.11.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-11.11.0
  • Fertig!

Version 11.10.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-11.10.0
  • Fertig!

Version 11.9.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-11.9.0
  • Fertig!

Version 11.8.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-11.8.0
  • Fertig!

Version 11.7.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-11.7.0
  • Fertig!

Version 11.6.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-11.6.0
  • Fertig!

Version 11.5.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-11.5.0
  • Fertig!

Version 11.4.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-11.4.0
  • Fertig!

Version 11.3.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-11.3.0
  • Fertig!

Version 11.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-11.2.0
  • Fertig!

Version 11.1.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-11.1.1
  • Fertig!

Version 11.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-11.1.0
  • Fertig!

Version 11.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-11.0.1
  • Fertig!

Version 11.0.0

Allgemein

  • Changelog 11.0.0
  • Bitten zuerst die vollständige Anleitung lesen und erst danach mit dem Update beginnen.

Vor dem Update

  • Node.js auf 12.x.x aktualisieren. Bitte ausschließlich LTS-Version verwenden.
  • Das Update sollte auf einem Update-Branch durchgeführt werden und nicht direkt auf dem Develop-Branch.
  • LUX-Components auf die letzte Version 10.x.x aktualisieren.
  • Angular auf die letzte Version 10.x.x aktualisieren.
    • ng update @angular/core@10 @angular/cli@10
    • Commit auf dem Update-Branch, sonst bekommt man beim nächsten Schritt den Fehler "Repository is not clean...".
  • Angular auf die Version 11.x.x aktualisieren.
    • ng update @angular/core@11 @angular/cli@11
    • Commit auf dem Update-Branch, sonst bekommt man beim nächsten Schritt den Fehler "Repository is not clean...".
  • LUX-Components-Updater aktualisieren.
    • npm install @ihk-gfi/lux-components-update@11 --save-dev

Update

  • LUX-Components aktualisieren.
    • ng generate @ihk-gfi/lux-components-update:update
    • Hinweis: Der Ordner /src/theming/ wurde durch den Updater gelöscht. Falls sich in dem Verzeichnis eigene Styles-Dateien befunden haben, müssen diese manuell wieder hergestellt werden. Besser wäre es, die eigenen Styles in die Datei styles.scss zu verschieben.
    • ng generate @ihk-gfi/lux-components-update:migrate-to-webcomponent
    • Migration zu ES-Lint (optional, aber empfohlen)
      • ng generate @ihk-gfi/lux-components-update:migrate-to-eslint
      • Wichtig!!! Der Updater schreibt die restlichen Befehle in die Console. Diese müssen manuell ausgeführt werden.
      • npm run lint
      • Durch die neuen Lint-Regeln können neue Lint-Fehler auftauchen. Sollte das der Fall sein, müssen diese behoben werden.
    • npm run xi18n ausführen, um die Übersetzungsdateien zu füllen.
  • Fertig!

Nach dem Update

  • Falls es weitere Abhängigkeiten im Projekt gibt, sollten diese ebenfalls aktualisiert werden.
  • Einen Smoketest (build-aot, lint und test) ausführen.
    • npm run smoketest
  • Bitte prüfen, ob das Flag generateLuxTagIds in den Dateien environment.ts und environment.prod.ts korrekt gesetzt ist. Z.B. wenn es (automatische) Tests gibt, die in einer Produktionsumgebung ausgeführt werden, dann sollte das Flag auf true gesetzt werden.
  • Fertig!

Troubleshooting

  • Allgemein: Bei einigen Problemen hat es geholfen, einmal die Datei package-lock.json und den node_modules-Ordner zu löschen und npm install auszuführen.

  • Allgemein: Die LuxTagIds fehlen und die automatischen Tests schlagen fehl. Bitte das Flag generateLuxTagIds in der Datei environment.prod.ts prüfen. Zusätzlich ist sicherzustellen, dass in der LUX-Componentskonfiguration (siehe app.module.ts) auch das Flag aus der Datei environment.prod.ts verwendet wird (generateLuxTagIds: environment.generateLuxTagIds,).

  • Allgemein: Der Browser lädt die Anwendung nicht (Bildschirm bleibt weiß) und weder in der Debugconsole noch im Netzwerktab sind Fehler zu erkennen.

    • Bitte prüfen, ob der Tag-Name in der Datei index.html mit dem aus der Datei app.module.ts (siehe die Methode ngDoBootstrap) übereinstimmt.

  • Lint: Das Ausführen von npm run lint verändert die Sourcen. Korrekt, dafür ist der Parameter --fix in der package.json verantwortlich. Wenn das nicht gewollt ist, kann dieser Parameter entfernt werden.

  • Lint: Durch die Migration zu ESLint gibt es zu viele Fehler, um sie direkt alle beheben zu können. In diesem Fall kann man die betroffenen Regeln in den rules-Abschnitt in der .eslintrc.json mit dem Wert off eintragen. Zu einem späteren Zeitpunkt sollte man die Regel wieder aktivieren und die Fehler beheben.

  • SCSS: Compilefehler in SCSS-Dateien. Das LUX-Theme ist in ein eigenes NPM-Projekt lux-components-theme ausgelagert worden.

    • Die Dateien (z.B. luxcommon - @import '../../../../theming/luxcommon';) können nicht länger importiert werden. Als Ersatz gibt es entsprechende CSS-Klassen.

      Aus color: $dark-primary-text (SCSS-Datei) wird class="lux-color-dark-primary-text (HTML-Datei).

      Aus background-color: map-get($lux-palette_accent, 500); (SCSS-Datei) wird class="lux-bg-color-accent-500 (HTML-Datei).

      Aus border-color: map-get($lux-palette_warn, A100); (SCSS-Datei) wird class="lux-border-color-warn-a100 (HTML-Datei).

      Aus outline-color: map-get($lux-palette_darkblue, 100); (SCSS-Datei) wird class="lux-outline-color-primary-100 (HTML-Datei).

      Weitere Details können der README.md entnommen werden.

      Beispiel 1 (alt):

      @import "../../../../theming/luxcommon";

.my-item-class {
  color: $dark-primary-text;
}

      Beispiel 1 (neu):

        <div class="my-item-class lux-color-dark-primary-text">
    ...
  </div>

      Beispiel (alt):

      @import "../../../../theming/luxcommon";

.my-item-class {
  color: map-get($lux-palette_darkblue, 500);
}

      Beispiel 2 (neu):

        ...
  <div class="my-item-class lux-color-primary-500">
    ...
  </div>

Ergänzung für JAST-Projekte

  • Im UI-Service in der Datei "ApplicationConfiguration.configure(HttpSecurity).angularApi" muss der Wert "/styles(-es5|-es2015)?\\.js(\\.map)?" durch "/styles(-es5|-es2015)?\\.(js|css)(\\.map)?" ersetzt werden.

  • Im UI-Service in den Dateien "application.yml, application-dev.yml und application-frei.yml" muss die CSP (style-src und font-src) angepasst werden:

    http:
security:
  csp: "...
    style-src 'self' 'unsafe-inline' https://use.fontawesome.com https://fonts.googleapis.com;
    font-src 'self' https://use.fontawesome.com https://fonts.googleapis.com https://fonts.gstatic.com data:;
    ..."
    • Anleitung "How To: I18N-Funktionalität (Internationalisation) verwenden" abarbeiten, wenn man eine mehrsprachige App benötigt. Ansonsten ist man bereits fertig!
    • Nicht vergessen, auch in den Jenkins-Dateien die Node.js auf 12.x.x zu aktualisieren.

Weiterführende Verweise bei Interesse oder Problemen

Sidebar

Clone this wiki locally