how to debug issue javascript file in angular 2?

Question

I download this example https://github.com/angular/angular2-seed .I am using webstrom editor and then use npm install then I use npm start..Apllication is running fine but I am not able to debug the app ..how I will debug the app? is there any way to debug the app

I follow all steps

Clone or fork this repository
Make sure you have node.js installed
run npm install to install dependencies
run npm start to fire up dev server
open browser to http://localhost:8080

Where do you want to debug? Which IDE? In the browser just open the devtools and set a breakpoint. In WebStorm you might be able to just set a breakpoint before or while you're running the application. Please provide more information about what you're trying to accomplish. — Günter Zöchbauer
– Günter Zöchbauer, Commented Feb 12, 2016 at 11:02
You might need to disable minification. You might need to enable source maps in the browser devtools settings (I don't use TS myself and don't know details) — Günter Zöchbauer
– Günter Zöchbauer, Commented Feb 12, 2016 at 11:09

Community · Accepted Answer · 2017-05-23 12:02:08Z

2

The webpack configuration on in this angular2 seed application is not configured to use sourcemaps. Have a look here: How do I generate sourcemaps when using babel and webpack? for some hints

In short: In your tsconf.json:

{
  "compilerOptions": {
    "module": "commonjs",
    "sourceMap": true //Set to true to get source maps from .ts, not .js
  },
  "files": [
    ...
  ]
}

In your webpack.config:

module.exports = {
  devtool: 'source-map', // to generate sourcemaps

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Feb 12, 2016 at 11:22

jornare

2,89321 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

jornare Over a year ago

If you restart the webpack server, you will get sourcemaps. -But I see this solution gives you sourcemaps for your compiled .ts files, not the actual source.

user944513 Over a year ago

actually please download the code then you find it not working

jornare Over a year ago

I find the github.com/AngularClass/angular2-webpack-starter project to be quite useful. It also contains setup for testing, so it might be overkill for you if you are only playing.

user944513 Over a year ago

yes ...So what is best way to debug the code ..because if there is an error ..than how I found

jornare Over a year ago

I did. I get the sourcemaps, and in chrome they are located under 'webpack://' in the sources directory in the dev-tools.

|

Collectives™ on Stack Overflow

how to debug issue javascript file in angular 2?

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related