ngx-logger ist eine solide Logging-Bibliothek für Angular. Sie ähnelt vertrauten Logging-Frameworks wie Apache Log4j (Java), Timber (Android/Kotlin) und Winston (Node.js) - und bietet einige klare Vorteile gegenüber einem nackten console.log:

  • Unterschiedliche Log-Level - in der Produktion lässt sich alles unter ERROR stumm schalten
  • Automatischer Zeitstempel vor jeder Protokollzeile
  • Logs können einfach an einen Remote-Server weitergeleitet werden

Das Problem

Ab Version 4.1.2 ist kein benutzerdefinierter Format-String für timestampFormat mehr zulässig. Der TypeScript-Compiler wirft folgenden Fehler:

Fehler TS2322: Type '"HH:mm:ss.SSS"' is not assignable to type '"medium" | "full" | "short" | "long" | "shortDate" | "mediumDate" | "longDate" | "fullDate" | "shortTime" | "mediumTime" | "longTime" | "fullTime"'.

Tatsächlich akzeptiert ngx-logger intern jedoch alles, was die Angular Date Pipe unterstützt - der Compiler-Fehler ist zu restriktiv.

Die Lösung

Ein einzelnes // @ts-ignore als Kommentar vor der entsprechenden Zeile ist ausreichend:

LoggerModule.forRoot({
  level: NgxLoggerLevel.DEBUG,
  // @ts-ignore
  timestampFormat: 'HH:mm:ss.SSS',
  enableSourceMaps: true
})

Das Ergebnis ist ein lesbares, kompaktes Zeitformat in der Konsole:

15:22:59.764 DEBUG [webpack:///./src/app/app.component.ts:86] Loaded initial data

Im Vergleich zum Standard-ISO-Format:

2020-03-09T14:28:30.105Z DEBUG [webpack:///./src/app/app.component.ts:86] Loaded initial data

Bonus: enableSourceMaps

Mit enableSourceMaps: true lässt sich direkt auf einen Log-Eintrag in der Browser-Konsole klicken und springt zur exakten Zeile in der .ts-Quelldatei. Beim Debuggen ein erheblicher Zeitgewinn.