angular - Cum să depanezi fișiere TypeScript în Angular2

Se pare că, cu cel mai recent pachet npm angular2, nu există nicio modalitate de a depana sursele TypeScript. Răspunsurile existente pe StackOverflow și articolul de pe Medium sunt depășite. Am creat un issue pe GitHub, vă rog să-l susțineți.

Există două probleme:

1) Sursele TypeScript nu mai sunt codificate direct ca URI de date în interiorul hărților sursă, ci de fapt indică o locație inexistentă în npm (este de fapt o locație în sursele Angular de pe GitHub, dar nu este ceva din pachetul npm):

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

Am descoperit că acest traseu nu are relevanță, deoarece sursele Angular sunt compilate folosind opțiunea --inlineSources și astfel fișierele *.map conțin cheia sourcesContent cu conținutul original în interior. Deci acesta nu mai este o problemă. Dar a doua problemă rămâne.

2) Chiar dacă doar copiez folderul modules din sursele de pe GitHub, există o a doua problemă, și anume că fișierele js din pachetul npm sunt compilate în sintaxa modulelor es6, care încă nu este suportată în browsere, iar un loader, precum SystemJS, necesită traceur. De exemplu, 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';

Dar nu pot folosi traceur, deoarece cel mai probabil va strica hărțile de sursă existente create pentru fișierele js transpile de tsc.

Răspuns #1

UPD Am deschis un ticket cerând activarea suportului pentru source map în Angular CLI. De asemenea, se discută cum poți activa suportul pentru source map deja de astăzi. Activarea source map-urilor pentru framework va permite practic depanarea surselor TypeScript.

Angular CLI a trecut de la utilizarea System.js la Webpack și, personal, nu-mi place System.js, așa că nu există răspuns pentru System.js aici.

Nu poți depana împotriva surselor TypeScript ale framework-ului însuși, deoarece hărțile sursă sunt generate pentru JavaScript compilat, nu pentru TypeScript. Pe de altă parte, codul generat este ușor de citit și este suficient de bun pentru scopuri de depanare. Vestea bună este că propriul tău cod va fi mapat la sursele originale TypeScript.

Și nu cred că există o modalitate ușoară de a obține hărți de sursă pentru Angular față de sursele TypeScript, decât dacă sunt construite împreună cu cadrul. Așa că cel mai bun lucru pe care îl poți obține acum este depanarea JS compilat.

Și acum să exersăm. Creează o aplicație nouă cu Angular CLI:

ng new my-app

Adaugă un punct de oprire undeva:

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

  constructor() {
    debugger;
  }
}

Porniți serverul de dezvoltare:

ng serve

Și deschide următorul URL în browserul tău: http://localhost:4200/. Observă că se oprește la punctul de oprire și mergi la unele apeluri ale framework-ului din stivă.

Răspunsul #2

Ultima versiune Angular 2 folosește Webpack în loc de SystemJS. Ambele sisteme funcționează diferit.

SystemJS încarcă sursele când este necesar. De asemenea, transformă TypeScript în JS în interiorul browserului. Webpack construiește aplicația din surse mai întâi. Este mai rapid. Toată munca nu trebuie făcută de browserul tău.

Când încerci aici să debugezi librării precum angular, trebuie să oferi Webpack un indiciu. Asta înseamnă că trebuie să configurezi fișierul tău Webpack.

Nu sunt sigur dacă Angular CLI suportă acest lucru direct din fabrică. De asemenea, aruncă o privire la Webpack pentru opțiuni de depanare.

Îmi pare rău, aici nu pot ajuta mai departe.