4


I'm facing an issue in Typescript debugging and I'm literally getting lost on making breakpoints working.

THE ISSUE:

I'm working on Visual Studio 2017, with the integrated angular-cli app (which is now compatible and does not require a webpack configuration file any more) but if I put a breakpoint on my typescript files, the breakpoint is not being hit.

I've enabled "sourceMap: true" boolean in my tsconfig.json which - in theory - should be the only file that I should edit.
Now my tsconfig.json content is the following:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "strict": false,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

I'll glad to share with you more info and more of my code, if needed, but actually you can easily reproduce the issue by simply trying to debug the angular app in visual studio 2017 that is created with the following CMD/PowerShell commands:

dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0
dotnet new angular -o my-new-app
cd my-new-app
cd ClientApp
npm update

THE QUESTION:
Can you explain me what should I exaclty set in order to enable Angular Typescript debug in Visual Studio 2017?

Thanks in advance!

IMPORTANT EDIT

Alternative to Visual Studio ts debug
Looks like that new angular 6+ apps without a webpack.config file make debug possible via chrome webtools.
If you enable sourceMap:true on tsconfig, you can debug even your .ts files.
Find them under "webpack" code section, as I've read here.

What about Visual Studio?
One of the new Visual Studio updates made possible script debug but is not working with latest angular cli and angular versions yet.

...and What about VS Code?
Thanks to Liebster Kamerad in the comments, you can find how to enable Breakpoints on VS Code here

Keeping the question, hope next updates will solve this somehow

Deadpool
  • 1,031
  • 3
  • 19
  • 35
  • 1
    I just use dev tools like normal to debug UI and breakpoints in VS2017 for API/back end stuff. There may be other interesting ways of debugging but I like to spend more time on coding then trying to complicate and reinvent proven dev conventions. Good luck! – BSchnitzel May 07 '18 at 17:05
  • @BSchnitzel Actually by using a proper webpack configuration file it's possible to use breakpoints on typescript directly in visual studio, but configuring webpack is quite a minefield. New angular-cli projects are born with a built-in webpack configuration which, from Webpack v.4, doesn't need a config file any more. An other problem problem is that using breakpoints on chrome dev tools is impossible because generated javascript is minified and as minified is impossible to understand – Deadpool May 08 '18 at 08:59
  • Did not know that. But I've actually had to debug projects in Prod which is typically minified but I've just hit the curly braces button on the bottom of dev tools that beautifies the code. Still hard to understand the transpiled JS/TS, but at least you can see what data is being passed – BSchnitzel May 08 '18 at 13:09
  • 1
    Don't know if it's relevant here since I don't work with Visual Studio. In my case breakpoints were not hitting in Intellij & VSCode, I discovered that the problem was with source map generation in Webpack that Angular CLI uses under the hood, see my complete answer here https://stackoverflow.com/a/54883663/706012. – Liebster Kamerad Feb 26 '19 at 11:33
  • @LiebsterKamerad Thanks for your comment! I think it's somehow relevant since Visual Studio is quite bad at Typescript/Front-End editing in my opinion and now I would strongly recomend using VS Code for this task. I added a link to your answer in my "IMPORTANT EDIT", under "...and What about VS Code?" – Deadpool Feb 27 '19 at 07:49

0 Answers0