How to debug angular app using angular-cli webpack?

by

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/[email protected] 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 [email protected] – .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.

More Related Contents:

  1. Dynamically load HTML template in angular2
  2. @types/googlemaps/index.d.ts’ is not a module
  3. How to iterate using ngFor loop Map containing key as string and values as map iteration
  4. How to get rid of the warning .ts file is part of the TypeScript compilation but it’s unused
  5. Avoiding relative paths in Angular CLI
  6. How to generate components in a specific folder with Angular CLI?
  7. How do I pass data to Angular routed components?
  8. How can I get new selection in “select” in Angular 2?
  9. Ionic 2 – global NavBar for the app
  10. Angular 2 Checkbox Two Way Data Binding
  11. Angular: How to correctly implement APP_INITIALIZER
  12. Angular 2 – 2 Way Binding with NgModel in NgFor
  13. Property ‘value’ does not exist on type EventTarget in TypeScript [duplicate]
  14. Adding Jar files to IntellijIdea classpath
  15. Argument of type ‘string | null’ is not assignable to parameter of type ‘string’. Type ‘null’ is not assignable to type ‘string’
  16. Styles in component for D3.js do not show in angular 2
  17. Rxjs toPromise() deprecated
  18. How to achieve a debounce service on input keyup event in angular2 with rxjs
  19. Generic email validator
  20. How to open and edit multiple projects in the same window?
  21. How do I share IntelliJ Run/Debug configurations between projects?
  22. Storing Objects in localStorage
  23. Tracking scroll position and notifying other components about it
  24. Angular 4: How to read data from Excel?
  25. Sanitize input in Angular2 [duplicate]
  26. How to Using a FormArray in a FormGroup
  27. Class is using Angular features but is not decorated. Please add an explicit Angular decorator
  28. How to validate white spaces/empty spaces? [Angular 2]
  29. Call a function every 10 seconds Angular2
  30. How to log data to the Flutter console?

Leave a Comment