Angular 2 Errors and Typescript - how to debug?

Question

I\'ve just started a project to learn Angular2 and Typescript+Javascript. I come from a Java background and my approach to debugging projects is usually a combination of stack t

Answer 1

I think this doesn't just hold for Angular2, but given you come from a Java background I assume this is more like "how do I successfully debug JavaScript web apps" in general.

Related to this I highly suggest you to take a look at the Chrome Devtools page (given you use Chrome which has very neat devtools build-in).
On that page there are a lot of useful tutorials. Specifically in your case probably the article on Debugging JavaScript which has some cool tipps like conditional debugging, breaking on DOM modifications, even break on caught/uncaught exceptions etc.

I also often suggest people to do the free Code School course on Discover Devtools which is nice as well.

In the case of TypeScript, also make sure that you enable sourcemaps. As you probably know TypeScript isn't directly executed by the browser, but rather it is being "compiled" (or as it's called "transpiled") into JavaScript. That said, you probably don't wanna debug the transpiled JS but rather the TypeScript code you wrote. To enable sourcemaps, set the proper flag in your tsconfig.json:

{
  "version": "1.6.2",
  "compilerOptions": {
    ...
    "sourceMap": true
  },
  "exclude": [
     ...
  ]
}