How to effectively debug with angular/cli
The latest version of angular/cli now utilizes webpack, which no longer compiles the ts files to a local directory like 'dist' as it did before (up to beta 1.0.0-beta.10). Instead, it uses a memory-like approach.
If you're looking for the ts Files, you can locate them in the "Sources" tab within Chrome Developer Tools.
(Fresh) Approach for angular/[email protected] and above versions
Note: This solution has been tested on versions 1.0.0-beta.26 and 1.2.1
Note: In this example, I've used port 5321 instead of 4200. Adjust accordingly based on your setup.
Effective Debugging with Chrome Developer Tools
While you have ng serve running (also utilized in npm start), you'll find your sources under "webpack://" in the Chrome Developer Tools:
https://i.sstatic.net/C32XU.png
Debugging Your Angular 2 App seamlessly with angular/cli using JetBrains IDE
To streamline your debugging experience, simply adjust your Run/Debug Configuration in Webstorm/PHPStorm as follows:
- Set your Remote URL Path of your project directory to
webpack://.
- Set your Remote URL Path of your src directory to
webpack://./src
https://i.sstatic.net/xeKHG.png
Debugging via Chrome Developer Tools
When running ng serve (also employed in npm start), navigate to the Chrome Developer Tools section to access your sources under "webpack://":
https://i.sstatic.net/1g1F8.png
Enhanced Debugging of Your Angular 2 App with angular-cli@webpack using JetBrains IDE
To enhance your debugging process, tweak your Run/Debug Configuration in Webstorm/PHPStorm by setting your Remote URL Path of your project directory to:
On Mac OSX: webpack:////Users/...FULL_PATH..
Or
On Windows: webpack:///C:/...FULL_PATH..
Note: On Windows, use only 3 slashes, and on Mac, employ 4 slashes after "webpack:"
You can also verify your Path by visiting http://localhost:4200/main.map and searching for any ".ts" File. Copy the path of the file and paste it into your IDE Configuration Dialog effortlessly.
https://i.sstatic.net/5gNij.png
UPDATE: You may need to map the path by adding "/src" to your src folder as well. Thanks @born2net
Enjoy the process!