Quantcast

Angular2 + Visual Studio 2015 : Source maps

comments edit

This series sample will convert the Tour of heroes sample application from angular.io.

As usual, the source is available on Github here.

This part will add source map support, for easier typescript debugging using Chrome tools.

Configuring typescript compiler

The easiest way to generate source maps is to add two parameters to the tsconfig.json file :

{
  "compilerOptions": {
    "inlineSourceMap": true,
    "inlineSources": true,
  }
}

Those will generate inline source mapping and original typescript sources directly into generated javascript files.

Debugging

Running the Chrome debugger (unfortunately, not working with IE11 debugger…), notice the hero = Object {id: 12, name: “Narco”} tooltip, and the immediate watch displayed when hovering this._router !

Chrome debugger

Moving to core.js polyfills

After upgrading to latest Angular2 packages, my sample app was not working anymore with IE11. After a bit of search and fiddling, I updated the sample to use polyfills from core.js.