Debugging in IDE

[doczoidberg]

is it or will it ever be possible to debug angular-cli (typescript) based projects inside the IDE?

[filipesilva]

Something like this? https://www.jetbrains.com/webstorm/help/debugging-typescript.html

I haven't used it, but Angular 2 in typescript is a TS project just like any other. You should be able to debug it with normal TS debugging tools.

[pauleveritt]

I'm developer advocate for PyCharm/WebStorm and do a bunch of Angular. @doczoidberg if you have some specifics, give me a nudge. But I suspect this question might be a little too broad for the angular-cli team.

[doczoidberg]

I installed the jetbrains chrome extension and the console ouput is send to webstorm. Also chrome says "JetBrains IDE Support" is debugging this browser. But breakpoints in my ts files are not hit.

[filipesilva]

@doczoidberg This might be related to the brocolli build step and code transpilation in angular-cli.

@pauleveritt does jetbrains debugging tools output instrumented code, and rely on that instrumentation to trigger editor behaviour?

[filipesilva]

@doczoidberg can you try debugging the quickstart example?

[pauleveritt]

@doczoidberg I asked the WebStorm folks for some help, but surprisingly, it just worked with Tour of Heroes. I pointed the Debug run config at http://localhost:3000 and had to configure my Chrome extension's port to match what WebStorm was expecting. After that it worked.

If you'd like, I can make a little screencast with an illustration.

[doczoidberg]

that would be awesome. I think i am doing something wrong.

[filipesilva]

No I don't think it's you. I think the the build process and concat, there was some talk about debugging tools and this within the team.

We might need to make a few adjustments to the CLI for IDE debugging to work well.

[pauleveritt]

@filipesilva Here you go: https://www.youtube.com/watch?v=RQSRKi3VZ3I

[doczoidberg]

thanks. But this does not work with angular cli projects as filipesilva also mentioned

[filipesilva]

@pauleveritt this is pretty cool! Thank you for making this video!

[pauleveritt]

@doczoidberg Ah, sorry, I got mixed up in the issue thread, I thought I was responding to when @filipesilva asked you to try it with Tour of Heroes. Like you, I badly want to switch to angular-cli, but as it's still baking in the oven, if we try now we'll burn our fingers. :) Things like this (debugging the brocolli'd output) and trying to get third-party libs into the bundles are still raw.

[pauleveritt]

@filipesilva My pleasure, but a bigger thanks to all of you for working on angular-cli. The amount of complexity you're dealing with, and the rate of change by all variables, I can't imagine how you keep it all in your head.

[filipesilva]

I'll keep this issue open, the goal is to have good tooling when using the CLI, it's just not there yet.

[hansl]

There's nothing particularly difficult or impossible about using an IDE to debug. Closing this, but maybe we should add information on some README or wiki about how to configure your favorite IDE to run ng serve.

[zackarychapple]

@hansl maybe instead of having the IDE run the ng serve command we can have a deeper integration with JetBrains and allow Angular to be deployed similar to how node apps and such can be deployed, ideally giving us a way to debug / step through server side logic as well. I know that is one thing I miss the most.

[drew-moore]

@zackarychapple +1000

[ghost]

Before upgrading to webpack, I could debug my angular 2 app. Now with webpack I can not debug anything using Webstorm or using Chrome Debugger because there are no ts files. How can I debug my angular 2 app with angular-cli in Chrome or Webstorm?

[jasekiw]

This issue should be reopened because angular-cli changed to webpack and does not generate the correct source maps in order for debugging to work for typescript. This is definitely something that should be fixed before releasing.

[MarcinMilewski]

I have successfully solved problem with debugging with webpack in Intellij/Webstorm based on this solution: http://stackoverflow.com/questions/39348213/how-to-debug-angular-2-app-using-angular-cli-webpack. You have to map your main ui project directory and directory with .ts sources to remote url, exactly the same as in the solution upside.

My tsconfig.json:
{ "compilerOptions": { "declaration": false, "emitDecoratorMetadata": true, "experimentalDecorators": true, "lib": ["es6", "dom"], "mapRoot": "./", "module": "es6", "moduleResolution": "node", "noImplicitAny": false, "outDir": "../resources/static/out-tsc", "sourceMap": true, "target": "es6", "typeRoots": [ "../../../node_modules/@types" ] } }

[castamir]

see #2750

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}