how do I get source map working for npm linked angular library

Question

I have created angular 7 library with ng g library @my-org/some-lib and use it in separate angular app by npm link to be able to develop both app and a library.

Now I found that in dev tools I see the library as a separate my-org-some-lib bundled js file resolved from the vendor.js.map yet it is not resolving further to the sourceMappingURL=my-org-some-lib.js.map which exists in the my-org-some-lib.js and the map file is actually generated in a builded library.

Nepali

Not sure but looks like the same issue. github.com/webpack-contrib/source-map-loader/issues/40. Please check LeonardoGentile answer in the link – Moye

Answer 1

after some time of dealing with combined library sources finally I found a solution:

1. in the angular.json in projects.app.architect.build.options path there need to include

"options": {
  "sourceMap": true,
  "vendorSourceMap": true,
  "preserveSymlinks": true, // <-- bonus - to use npm link'ed libraries
  // ...
  // note that json format does not allows comments ;)
}

2. to avoid sourcemaps in production ensure (should be there by default)

"configurations": {
  "production" :{
    "sourceMap": false
    // ...
  }
}

3. there was a bug in @angular-devkit/build-angular, version >= 0.801.3 should work ok

the above solution is taken from https://github.com/angular/angular-cli/issues/15531

Nepali

These options were removed in angular 8. The options shown by Azerafati are more up to date though I think this explains there location better – Nebo

Answer 2

what worked for me was this from here https://angular.io/guide/workspace-config#source-map-configuration

"sourceMap": {
  "scripts": true,
  "styles": true,
  "hidden": false,
  "vendor": true
}

Zarate