49

I used angular-cli@1.0.0-beta.10 before and now I updated to angular-cli@webpack beta.11. After a lot of custom changes I got it to work.

The only thing is that now I can not debug my angular app using webstorm and chrome debugger because I don't get any ts files using ng serve. With angular-cli@1.0.0-beta.10 it was very easy to debug my app using the Jetbrains Plugin.

How can I debug my angular app with Webstorm and the Chrome Debugger using ng serve?

julianpoemp
  • 1,965
  • 3
  • 14
  • 29
  • See this link https://stackoverflow.com/questions/46714537/chrome-debug-angular-typescript-how-to-navigate-to-ts-file/51941277#51941277 – kumar chandraketu Aug 21 '18 at 03:50

6 Answers6

54

How to debug with angular/cli

The new angular/cli version uses webpack which does not compile the ts files to an local directory like dist before (till beta 1.0.0-beta.10). Now it uses some memory like approach.

But you can find the ts Files in the Chrome Developer Tools in the "Sources" tab.

(new) Solution for angular/cli@1.0.0-beta.26 and newer

Notice: This solution was tested with version 1.0.0-beta.26 and 1.2.1

Notice: In this example I used port 5321 instead of 4200. Just use your port.

Debugging with Chrome Developer Tools

While running ng serve (also used in npm start), you can find your sources in the Chrome Developer Tools section: "webpack://":

src destination in Chrome Developer Tools "Sources" section

Debugging Angular 2 App with angular/cli using JetBrains IDE

Just edit your Run/Debug Configuration in Webstorm/PHPStorm to following:

  1. Set your Remote URL Path of your project directory to webpack://.
  2. Set your Remote URL Path of your src directory to webpack://./src

IDE Configuration

(old) Solution for angular-cli@1.0.0-beta.10 - .14

Debugging with Chrome Developer Tools

While running ng serve (also used in npm start), you can find your sources in the Chrome Developer Tools section: "webpack://":

The destination of the ts files in the developer tools

Debugging Angular 2 App with angular-cli@webpack using JetBrains IDE

Just edit your Run/Debug Configuration in Webstorm/PHPStorm to following: Set your Remote URL Path of your project directory to

webpack:////Users/...FULL_PATH.. //on Mac OSX

or

webpack:///C:/...FULL_PATH.. //example on Windows

Notice: on Windows you only need 3 slashes, on Mac you need 4 slashes after "webpack:"

You can also check your Path by going to http://localhost:4200/main.map and search for any ".ts" File. You can easily copy the path of this file and paste it to your IDE Configuration Dialog.

enter image description here

EDIT: Perhaps you need to map the path adding "/src" to your src folder too. Thanks @born2net

Have Fun.

julianpoemp
  • 1,965
  • 3
  • 14
  • 29
  • 3
    One problem I have found, in the case of debugging with Chrome with a webpack build, is that it is sometimes impossible to properly set a breakpoint, the sourcemaps are messed up perhaps. Which is why I reverted to developing with a systemjs build (there is no problem setting breakpoints) – brando Sep 13 '16 at 01:46
  • 1
    to be fair you should admit that the webpack build of angular-cli is still in beta phase. I assume that this issue with source maps will be improved in the final version of angular-cli@webpack. – julianpoemp Sep 14 '16 at 07:53
  • 2
    fair point. I expect (hope!) the source mapping will be fixed. Otherwise the angular-cli is an excellent tool I only expect to get better. – brando Sep 14 '16 at 16:10
  • 1
    On Windows you should use three slashes instead of four in the remote URL, like webpack:///C:/Users/... – bedrin Oct 07 '16 at 08:17
  • Didn't work with Angular CLI 7.2.2, the solution was https://stackoverflow.com/a/54883663/706012 – Liebster Kamerad Feb 26 '19 at 13:06
13

ok got it working, you need to map both root and src. see here:

hopefully it helps someone,

enter image description here

let me add that sometimes the debugger will miss your breakpoint so add alert('foo') or ;debugger code just before your breakpoint.

tx

will be adding and convering jspm projects to new cli Angular 2 Kitchen sink: http://ng2.javascriptninja.io and source@ https://github.com/born2net/ng2Boilerplate Regards,

Sean

born2net
  • 24,129
  • 22
  • 65
  • 104
  • are you sure that it does not work without mapping the src folder to the path? Normally the parent folder should be mapped to the absolute path and all subfolders relative to the parent path. – julianpoemp Sep 16 '16 at 09:28
  • both mappings seems to be necessary on windows. – julianpoemp Nov 03 '16 at 12:16
  • This is the most confusing thing, but yes, it works. `angular-cli: 1.0.0-beta.24 node: 6.9.1 os: darwin x64` – bernardn Dec 24 '16 at 12:42
  • as @Denko, worked on first try :) , but a note: adding the "Remote URL" only in the root project is enough. – Ninja Coding Jul 29 '17 at 15:45
4

2017 answer for: angular-cli: 1.0.0-beta.26 node: 6.9.2 os: darwin x64

If you are having problems with this, go to your Scripts tab in your debugger and try and align your URL mappings according to what you see.

None of the other answers helped me because my version of angular-cli mapped things a different way. enter image description here

jake
  • 488
  • 10
  • 19
0

What finally helped me was to add an additional / (forward slash) after webpack:///, so that there are 4 instead of 3. By default there were 3 forward slashes

Forward slash

The remote URL points to the same parent directory as on the left except the webpack://// schema.

Also you don't need to enable the TS compiler as often suggested.

  • MacOS
  • Angular-CLI 2.4.1
  • WebStorm 2016.3
Flavien Volken
  • 19,196
  • 12
  • 100
  • 133
Vad1mo
  • 5,156
  • 6
  • 36
  • 65
0

Please note that the above solutions do NOT let you set breakpoints in the html files of angular components when using IntelliJ. You can only do this in Chrome. I don't understand why this is not possible in IntelliJ.

Axel
  • 867
  • 6
  • 9
-1

You can use Augury which is a dev tool extension for the web browsers in order to debug angular applications.

Here is the link you could install:

https://augury.angular.io/

This tool is very useful in viewing the hierarchy of your routing in your application, Module and Components hierarchy and the Dependency Injection overview on each component.

Here is an Inject Graph of my project which illustrate my above explanation:

enter image description here

Adnan Abdul Khaliq
  • 495
  • 8
  • 20
  • Augury is not maintained anymore and does not work correctly with current browser and Angular versions. – jhyot Dec 08 '20 at 09:16