Angular CLI 6 - Build Angular Libraries With Source Maps

Question

I've got an Angular 6 project that I've generated using Angular CLI 6 (6.08).

I created separate libraries using the ng generate library [lib name] --prefix [lib prefix] (approach outlined in this article: https://medium.com/@tomsu/how-to-build-a-library-for-angular-apps-4f9b38b0ed11).

I build each library using ng build [lib name] and then serve my application using ng serve.

However, when I view the source in Chrome Dev Tools, my libraries don't have source maps.

I've tried building each library using ng build [lib name] --source-map (as specified here: https://github.com/angular/angular-cli/wiki/build), but I think that's only for building that application, not libraries.

Does anyone know what I'm doing wrong have an alternative solution?

Answer 1

To view the source code of the angular library in the consuming app. We need to do the following 2 points:

1. Enable source maps when when building the angular library.
2. Enable source maps + vendorSourceMap when building the consuming app.

To enable source maps when when building the angular library.

1. In angular.json under, projects -> library_name -> architect -> build -> options

2. Enable source maps:

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

To enable source maps + vendorSourceMap when building the consuming app.

1. In angular.json under, projects -> projctName -> architect -> build

2. Set sourceMap to true:

   "sourceMap": true
   

3. In angular.json under projects -> projctName -> serve -> options

4. Set vendorSourceMap to true:

   "vendorSourceMap": true
   

Finally run the consuming app using the command:

ng serve --vendor-source-map