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?

Swiger

possible duplicate of https://mcmap.net/q/573555/-how-do-you-debug-an-angular-6-library/606662 – Caravette

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

Ezequiel

vendorSourceMap seems to be no longer available in ng11 – Fossiliferous

There is no sourceMap property under projects -> library_name -> architect -> build -> options. I'm using ng11. – Tussis

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.

Trichite

This is a great workaround. Please update this thread if Angular publishes a recommended approach if different than what you've done. – Haplo

It's also like you need an angular-dev.json that the CLI uses unless you specify the prod argument. – Swiger

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

Fuge

Seems to work, but will the source maps be left for a production build? – Swiger

Also, although this produces the source maps, they don't appear to be used when the ng server command is run for the entire solution – Swiger

This gives me the following error: Schema validation failed with the following errors: Data path "" should NOT have additional properties(vendorSourceMap). in v7.3.8 – Snippy

Running ng serve --vendor-source-map is working for me on ng-cli v7.38 without the build config change above. – Alps

Like @Swiger said, the sourcemaps won't come up when using the ng serve command. To see the sourcemaps with ng serve, add the option at projects -> your-app -> architect -> serve -> options -> vendorSourceMap – Parody

This answer no longer works - the "sourceMap": { "vendor": true } in the accepted answer is the way to go. – Temuco

ng serve --vendor-source-map is not working for Angular CLI: 13.3.10. – Castrato

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.

Alps

This answer: https://mcmap.net/q/587888/-vendorsourcemap-deprecated-in-angular-cli-7-2 is a bit more detailed. It is not required or allowed to enable Source Maps when building the library just enable Source Maps when consuming the library. – Renteria