Come eseguire il debug di un’app angular utilizzando il pacchetto Web angular-cli?

Ho usato angularcli@1.0.0-beta.10 prima e ora ho aggiornato ad angular-cli @ webpack beta.11. Dopo un sacco di modifiche personalizzate, l’ho fatto funzionare.

L’unica cosa è che ora non riesco a eseguire il debug della mia app angular usando webstorm e chrome debugger perché non ottengo alcun file ts usando ng serve. Con [email protected] è stato molto semplice eseguire il debug della mia app utilizzando il plugin Jetbrains.

Come posso eseguire il debug della mia app angular con Webstorm e il Chrome Debugger utilizzando ng serve?

Come eseguire il debug con angular / cli

La nuova versione angular / cli usa webpack che non compila i file ts in una directory locale come dist prima (fino alla beta 1.0.0-beta.10). Ora usa un approccio simile alla memoria.

Ma puoi trovare i file ts negli Strumenti per sviluppatori di Chrome nella scheda “Sorgenti”.


(nuovo) Soluzione per angular/[email protected] e successive

Avviso: questa soluzione è stata testata con la versione 1.0.0-beta.26 e 1.2.1

Avviso: in questo esempio ho usato la porta 5321 invece di 4200. Basta usare la porta.

Debugging con gli Strumenti per sviluppatori di Chrome

Durante l’esecuzione di ng serve (anche utilizzato in npm start), puoi trovare le tue risorse nella sezione Strumenti per sviluppatori di Chrome: “webpack: //”:

destinazione src nella sezione

Debug di Angular 2 App con angular / cli utilizzando IDE JetBrains

Basta modificare la configurazione Esegui / Debug in Webstorm / PHPStorm come segue:

  1. Imposta il tuo percorso URL remoto della directory del tuo progetto su webpack://.
  2. Imposta il percorso URL remoto della tua directory src su webpack://./src

Configurazione IDE


(vecchio) Soluzione per [email protected] – .14

Debugging con gli Strumenti per sviluppatori di Chrome

Durante l’esecuzione di ng serve (anche utilizzato in npm start), puoi trovare le tue risorse nella sezione Strumenti per sviluppatori di Chrome: “webpack: //”:

La destinazione dei file ts negli strumenti di sviluppo

Debug di Angular 2 App con angular-cli @ webpack utilizzando IDE JetBrains

Basta modificare la configurazione Esegui / Debug in Webstorm / PHPStorm come segue: Imposta il percorso URL remoto della directory del progetto in

webpack: ////Users/…FULL_PATH .. // su Mac OSX

o

webpack: /// C: /…FULL_PATH .. // esempio su Windows

Nota: su Windows hai bisogno solo di 3 barre, sul Mac hai bisogno di 4 barre dopo “webpack:”

Puoi anche controllare il tuo percorso andando su http: // localhost: 4200 / main.map e cercare qualsiasi file “.ts”. È ansible copiare facilmente il percorso di questo file e incollarlo nella finestra di dialogo di configurazione IDE.

inserisci la descrizione dell'immagine qui

EDIT : Forse è necessario mappare il percorso aggiungendo “/ src” anche alla cartella src. Grazie @ born2net

Divertiti.

ok ha funzionato, devi mappare sia root che src. Vedere qui:

speriamo che aiuti qualcuno,

inserisci la descrizione dell'immagine qui

lasciatemi aggiungere che a volte il debugger salterà il tuo punto di interruzione, quindi aggiungi un codice di avviso (‘foo’) o; debugger subito prima del punto di interruzione.

tx

aggiungerà e converrà progetti jspm al nuovo lavello cli Clipper Angular 2: http://ng2.javascriptninja.io e source @ https://github.com/born2net/ng2Boilerplate Saluti,

Sean

2017 risposta per: angular-cli: 1.0.0-beta.26 node: 6.9.2 os: darwin x64

Se hai problemi con questo, vai nella scheda Script del tuo debugger e prova ad allineare i tuoi mapping degli URL in base a ciò che vedi.

Nessuna delle altre risposte mi ha aiutato perché la mia versione di angular-cli mappava le cose in un modo diverso. inserisci la descrizione dell'immagine qui

È ansible utilizzare Augury, che è un’estensione strumento di sviluppo per i browser Web, al fine di eseguire il debug di applicazioni angolari.

Ecco il link che potresti installare:

https://augury.angular.io/

Questo strumento è molto utile per visualizzare la gerarchia del routing nell’applicazione, nella gerarchia di moduli e componenti e nella panoramica Iniezione di dipendenze su ciascun componente.

Ecco un Inject Graph del mio progetto che illustra la mia spiegazione sopra:

inserisci la descrizione dell'immagine qui

Quello che alla fine mi ha aiutato è stato aggiungere un ulteriore / (barra in avanti) dopo il webpack:/// , in modo che ci siano 4 invece di 3. Per default c’erano 3 barre in avanti

Barra

L’ remote URL punta alla stessa directory padre come a sinistra eccetto lo schema webpack://// .

Inoltre non è necessario abilitare il compilatore TS come spesso suggerito.

  • Mac OS
  • Angular-CLI 2.4.1
  • WebStorm 2016.3