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

Answer 2

I had the same problem. I ended up with pointing the library path directly to the public_api.ts file of the library instead of to the dist folder. This way I'm able to debug the application in the Dev Tools without any problems (furthermore I'm able to debug it directly from within Visual Studio Code this way).

So in your tsconfig.json instead of this:

"paths": {
  "my-lib": [
    "dist/my-lib"
  ]
}

I replaced it with this:

"paths": {
  "my-lib": [
    "projects/my-lib/src/public_api.ts"
  ]
}

This also has the nice side effect that auto reload works when doing changes in the library code.

However I'm not sure if it is recommended to do it that way, so I would like to see other approaches.

Answer 3

In your angular.json you can add "vendorSourceMap: true" to enable sourcemaps from your libraries to work.

{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "vendorSourceMap": true

Answer 4

For Angular 9+ setting the sourceMap for the local dev configuration of the app in angular.json

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

works without any other changes.