Angular mit Zeitstempel und Version

Selbst bei einfachstem Test- und Release-Vorgehen sollte immer klar sein welche Version der Anwendung man gerade vor sich hat. Hilfreich ist es dabei einen Zeitstempel und/oder die aktuelle Version innerhalb der Anwendung sichtbar zu machen.

Version

Die Version unserer Anwendung finden wir in unser package.json. Diese Datei ist aber natürlich nicht Teil unseres ausgelieferten Bundles. Diese Datei beim build einfach zu kopieren und somit verfügbar zu machen mag einfach sein, offenbart aber potenziellen Angreifern eine Vielzahl von Informationen über unser Projekt und dessen Abhängigkeiten. Stattdessen importieren wir in unserer Komponente die package.json und ermöglichen unserem TypeScript Compiler die Version zu extrahieren:

import {version} from '../../package.json';
...
@Component({})
export class AppComponent {
  version: string;

Damit TypeScript diesen Zugriff auf eine einfache JSON-Datei per Import erlaubt, reicht es aus in unserer tsconfig folgenden Eintrag zu ergänzen:

    "resolveJsonModule": true,

Zeitstempel

Der Zeitstempel stellt tatsächlich eine größere „Herausforderung“ dar. Unser Vorgehen: ein Eintrag in unserer Environment soll soll dazu dienen den Zeitstempel in der Anwendung verfügbar zu machen. Damit lässt sich eine Ausgabe in unserer Komponente ganz einfach realisieren

    this.version = `${version} - ${environment.buildTime}`

Unsere environments bereiten wir mit einem entsprechenden Eintrag vor:

export const environment = {
  buildTime: '',
...

Diese Variable muss aber nun natürlich beim Build auch gesetzt werden. Dazu verwenden wir ein NPM-Tool:

replace-in-file – npm (npmjs.com)

Damit können wir mittels node-Script, einen beliebigen Text-Ersatz innerhalb von Dateien ausführen. Ein entsprechendes Script könnte so aussehen. Dabei ermöglichen wir auch das „zurücksetzen“ auf einen Default Wert. Hintergrund: wir wollen keine unnötigen Dateiänderungen in unserem Versionskontrollsystem nach einem Build:

let replace = require("replace-in-file");
let buildTime = new Date().toISOString();
let revert = process.argv[2];

const options = {
  files: "src/environments/*.ts",
  allowEmptyPaths: false,
  from: /buildTime.*/g,
  to: `buildTime: '${revert ? '' : buildTime}',`
};

try {
  replace.sync(options);
} catch (error) {
  console.error("Error while setting build time:", error);
}

Anpassung an unserem npm-build-script:

"build": "node ./replace.build.js 
           &&  ng build --prod --base-href . 
           && node ./replace.build.js revert",

…und schon landet eine kleine nette Info in unserer Anwendung:

Über Dominik Mathmann
Dominik Mathmann arbeitet als Berater, Entwickler und Trainer bei der GEDOPLAN GmbH. Auf Basis seiner langjährigen Erfahrung in der Implementierung von Java-EE-Anwendungen leitet er Seminare, hält Vorträge und unterstützt Kunden bei der Konzeption und Realisierung von Webanwendungen vom Backend bis zum Frontend. Sein derzeitiger Schwerpunkt liegt dabei auf der Entwicklung von JSF-Anwendungen. Er sieht die stärker werdende Position von JavaScript-Frameworks jedoch positiv und beschäftigt sich darüber hinaus mit Webframeworks wie Angular.

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden /  Ändern )

Google Foto

Du kommentierst mit Deinem Google-Konto. Abmelden /  Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden /  Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden /  Ändern )

Verbinde mit %s

%d Bloggern gefällt das: