Wie man angular2 Typoskript-Dateien debuggt

Question

Es scheint, dass mit dem neuesten angular2 npm-Paket es keine Möglichkeit gibt, Typoskriptquellen zu debuggen. Bestehende answer on stackoverflow und the article on medium sind veraltet. Ich habe a github issue erstellt, bitte unterstützen Sie es.

Es gibt zwei Probleme:

1) Maschinenschrift Quellen werden nicht mehr als Daten URI innerhalb Kartengrund einprogrammiert, sondern weisen tatsächlich zu einem gewissen inexistent Lage in NPM (es ist eigentlich eine Lage in Winkel git Nabe Quellen , ist aber etwas in npm Paket nicht):

{ 
    "version":3, 
    "file":"application_ref.js", 
    "sourceRoot":"", 
    "sources":["../../../../modules/@angular/core/src/application_ref.ts"] <------- 

ich verfolgt habe nach unten, dass dieser Weg nicht relevence hat seit Winkelquellen --inlineSources Option kompiliert verwenden und so die *.map Dateien enthalten die sourcesContent Schlüssel mit den ursprünglichen Inhalt im Inneren. Das ist also kein Problem mehr. Aber das zweite Problem bleibt.

2) Auch wenn ich modules Ordner aus GitHub Quellen einfach zu kopieren, gibt es ein zweites Problem, das ist, dass js Dateien in npm Paket in es6 Modul Syntax kompiliert werden, die noch nicht in Browsern und einen Lader unterstützt wird, wie SystemJS, benötigt Traceur. Zum Beispiel common/index.j:

export { NgLocalization, CommonModule, NgClass, NgFor, NgIf, NgPlural, NgPluralCase, NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet, AsyncPipe, DatePipe, I18nPluralPipe, I18nSelectPipe, JsonPipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe, SlicePipe, UpperCasePipe, VERSION, Version, PlatformLocation, LocationStrategy, APP_BASE_HREF, HashLocationStrategy, PathLocationStrategy, Location } from './src/common'; 

Aber ich kann traceur nicht verwenden, da es höchstwahrscheinlich vorhandenen Quell Karten bricht erstellt für js Dateien transpiled von tsc.

Answer 1

Die neuesten eckigen 2 verwenden Webpack statt SystemJS. Beide Systeme funktionieren anders.

SystemJS Lastquellen bei Bedarf. Verwandeln Sie auch Typoskript in JS innerhalb des Browsers. Webpack bauen Sie die App zuerst aus Quellen. Das ist schneller. Alle Arbeiten dürfen nicht von Ihrem Browser ausgeführt werden.

Wenn Sie hier versuchen, Bibliotheken wie eckig zu debuggen, müssen Sie Webpack einen Hinweis geben. Sie müssen Ihre Web Pack-Datei konfigurieren.

Nicht sicher, ob Angular CLI diese Unterstützung aus der Box. Werfen Sie auch einen Blick auf Webpack für Debug-Optionen.

Sorry hier kann ich nicht weiter helfen.

Answer 2

UPD Ich habe issue geöffnet, um die Quellkartenunterstützung in der Angular CLI zu aktivieren. Außerdem wird erläutert, wie Sie die Unterstützung für Quellkarten bereits heute aktivieren können. Das Aktivieren von Quellzuordnungen für das Framework ermöglicht im Wesentlichen das Debuggen von TypeScript-Quellen.

Angular CLI wechselte von System.js zu Webpack und ich persönlich mag System.js nicht, also keine Antwort für System.js hier.

Sie können nicht gegen TypeScript-Quellen des Frameworks selbst debuggen, da Quellmaps für kompiliertes JavaScript und nicht für TypeScript generiert werden. Auf der anderen Seite ist generierter Code leicht lesbar und es ist ziemlich genug für Debugging-Zwecke. Die gute Neuigkeit ist, dass Ihr Quellcode originalen TypeScript-Quellen zugeordnet wird.

Und ich glaube nicht, dass es eine einfache Möglichkeit gibt, Quellkarten für Angular gegen TypeScript-Quellen zu erhalten, es sei denn, sie sind zusammen mit dem Framework eingebaut.Also das Beste, was Sie jetzt bekommen können, ist kompiliertes JS zu debuggen.

Und jetzt zu üben. Erstellen Sie neue App mit kantigem CLI:

$ ng new my-app 

Haltepunkt hinzufügen irgendwo:

// src/app/app.component.ts 
export class AppComponent { 
    title = 'app works!'; 

    constructor() { 
    debugger; 
    } 
} 

starten Entwicklungs-Server:

$ ng serve 

und öffnen Sie folgende URL in Ihrem Browser: http://localhost:4200/. Beobachten Sie, dass es am Haltepunkt stoppt und gehen Sie zu einigen Rahmenaufrufen im Stapel.