I'm having some issues debugging client-side TypeScript in WebStorm (9.0.2) and I was wondering whether this is a known issue or if there is a workaround for it.
I can reproduce the issue from scratch as follows:
Set up the project from scratch:
- creating a new Angular JS project
- fix up the project (add the missing angular node.js package)
- npm install
- rename app/view1/view1.js to view1.ts
- enable the file watcher for TypeScript
- verify that view1.ts gets compiled to view1.js
Run and debug:
Now when I set a breakpoint in view1.ts, it is marked as resolved (red dot with check mark), but the breakpoint is _not_ hit when reloading the page in the browser.
If I set a breakpoint in view1.js instead, the breakpoint _is_ hit, but the code of view1.ts OR view1.js is shown (randomly?) In both cases, if I then step-over, the debugger continues to step through view1.ts.
Similar for the debugger; statement. Sometimes it breaks into view1.js, sometimes into view1.ts.
Debugging the same code in Chrome works flawlessly, breakpoints can only be set in view1.ts and it always breaks into view1.ts. Which indicates that the js.map file is set up correctly.
Any idea why breakpoints for TypeScript work so unreliably in WebStorm? It would be really nice to be able to debug TypeScript in WebStorm, using breakpoints and all.