Debugging Angular2 Source Code

in Front-End Web Technologies

Angular2 is written using Typescript and then is compiled into plain ECMA5 JavaScript.

Chrome (and other browsers) allows you to debug the Typescript straight inside the browser using JavaScript map files.

Generally, this works great. However, when you step into Angular’s code you will not see the original Typescript code but rather the compiled & bundled version of the code. This makes debugging and understanding Angular a bit harder.

To step through Angular2 Typescript source code you need to do the following.

Locate the system.config.js file and change the following code.

var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

To

var setPackageConfig = packIndex;

This tells Angular to not use the bundled JavaScript files but rather load each individual source file separately. Each loaded file has source mapping embedded information which allows the browser to load the correct Typescript file.

For example, here is the content of @angular/common/index.js

  "use strict";
  function __export(m) {
      for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
  }
  __export(require('./src/pipes'));
  __export(require('./src/directives'));
  __export(require('./src/forms-deprecated'));
  __export(require('./src/common_directives'));
  __export(require('./src/location'));
 var localization_1 = require('./src/localization');
 exports.NgLocalization = localization_1.NgLocalization;
 //# sourceMappingURL=index.js.map

The comment line is the interesting one.

After changing the setPackageConfig variable all you have to do is reload the page and start debug the Typescript files.

Have a nice debug journey …

Contact us
You might also like
Share: