Search code examples
node.jsnpmwebpackangular-clisource-maps

Having source code for third party javascript libraries available whilst debugging

I would like to know whether it is possible to have third-party javascript libraries' source code available whilst debugging.

FYI, I use npm/nodejs and the angular CLI (which itself relies on Webpack).

Example libraries (together with their source languages) that I would like to have available during debugging are:

  • Angular 2 (typescript)
  • RxJS (typescript)

I guess what I want to achieve is related to configuring source maps.

Any comment or guidance welcome.

edit: Can someone please advise how to configure the angular CLI in order to have angular and RxJS typescript sources available whilst debugging?

Solution

  • To complement lena's answer and as of @angular/cli version's 6.1 is it now possible to output source maps for vendor libraries using the following syntax:

    ng serve --source-map --vendor-source-map

    It also works for the ng build command.

    See also: https://blog.ninja-squad.com/2018/07/27/angular-cli-6.1/

    It is then possible to debug third-party libraries using an IDE or the browser.