wake-up-neo.com

Wie debuggen Sie eine Angular 6 Bibliothek

Ich schreibe eine Angular 6-Bibliothek und kann nicht herausfinden, wie man in das TypeScript einsteigt.

Ich habe die App generiert mit: ng new mylibapp

Ich fügte dann die Bibliothek hinzu: ng g library @abc/cool-lib -p abc

wenn ich vorführe: ng build @abc/cool-lib

es generiert den Code im Ordner mylibapp/dist/abc/cool-lib

Wie kann ich nun diesen Code debuggen und Haltepunkte in der ts-Datei unter mylibapp/projects/abc/cool-lib/src/lib setzen?

5
JoAMoS

Bei der Betrachtung der CLI-Dokumente Angular in Bibliotheken wird Folgendes erwähnt:

Einige ähnliche Setups fügen stattdessen den Pfad direkt in tsconfig zum Quellcode hinzu. Dadurch werden Änderungen in Ihrer App schneller angezeigt.

Daher können Sie Ihre Datei tsconfig.json tatsächlich aktualisieren, um auf Ihren lokalen Quellcode zu verweisen, anstatt auf die erstellte Bibliothek. 

Verwenden des erstellten Projekts:

 "paths": {
  "abc": [
    "dist/abc"
  ]

Ändern Sie es, um die tatsächliche Quelle zu verwenden:

"paths": {
  "abc": [
    "projects/abc/src/public_api"
  ]

Es gibt Nachteile wie in den Dokumenten erwähnt:

Aber das ist riskant. Wenn Sie dies tun, erstellt das Build-System für Ihre App auch die Bibliothek. Ihre Bibliothek wird jedoch mit einem anderen Build-System erstellt als Ihre App.

In meinem Fall hat es sich jedoch gelohnt, in Chrome interaktiv debuggen zu können und Änderungen sofort ohne Neuaufbau zu sehen. Ich teste das erstellte Projekt jedoch außerhalb dieses Workflows vollständig.

4

Seit Angular CLI v. 6.1 können Sie den Schalter --vendor-source-map verwenden, mit dem Sie beim Debuggen in die TypeScript-Quelle Ihrer Bibliothek springen können. Versuchen Sie ng build @abc/cool-lib --vendor-source-map und sehen Sie, ob das hilft. Sie können den Schalter auch mit ng serve verwenden. In meinem Fall führe ich ng Serv für meine Anwendung aus, die die Bibliothek hostet, und die Quellenzuordnung der Bibliothek ist enthalten. Auf diese Weise müssen Sie auch die Datei tsconfig.json nicht bearbeiten

3
Scott Grodberg

Ab @ angle/cli v7 können Sie Ihrer angular.json - Datei die folgende Konfiguration hinzufügen, um Quellenzuordnungen für eine Bibliothek beim Serving mit ng serve Zu aktivieren:

{
  "projects": {
    "your-app": {
      "architect": {
        "serve": {
          "options": {
            "vendorSourceMap": true
2
Ravi Mashru

Das Setup ist jetzt (mit Angular 7, wahrscheinlich bereits 6.2) recht einfach:

  • Bibliothek im Watch-Modus kompilieren: ng build [mylib] --watch
  • App mit Hersteller-Quellkarten starten: ng serve --vendor-source-map

Jetzt stehen Bibliotheksquellen zur Verfügung (in den Entwicklertools Chrome/Firefox/...).


Update für Angular 7.2:

--vendor-source-map wurde durch --sourceMap=true|false für ng serve ersetzt:

  • ng serve --source-map=true
1
Markus Pscheidt