Angular CLI 6 - Build Angular Libraries With Source Maps

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

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.

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.

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