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?

possible duplicate of stackoverflow.com/q/50775520/606662

Markus Pscheidt
– Markus Pscheidt

2018-11-22 14:26:15 +00:00
Commented Nov 22, 2018 at 14:26 — Markus Pscheidt
– Markus Pscheidt, Commented Nov 22, 2018 at 14:26

raeffs · Accepted Answer · 2018-07-24 05:24:53Z

13

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.

answered Jul 24, 2018 at 5:24

raeffs

6056 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

smalone Over a year ago

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

TheMagnificent11 Over a year ago

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

ct5845 · Accepted Answer · 2018-09-27 10:05:56Z

8

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

answered Sep 27, 2018 at 10:05

ct5845

1,5983 gold badges16 silver badges20 bronze badges

7 Comments

TheMagnificent11 Over a year ago

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

TheMagnificent11 Over a year ago

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

CularBytes Over a year ago

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

JayChase Over a year ago

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

Ravi Mashru Over a year ago

Like @TheMagnificent11 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

|

fcdt · Accepted Answer · 2020-11-07 10:52:40Z

4

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

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

To enable source maps when when building the angular library.

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

Enable source maps:

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

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

In angular.json under, projects -> projctName -> architect -> build
Set sourceMap to true:
```
"sourceMap": true
```
In angular.json under projects -> projctName -> serve -> options
Set vendorSourceMap to true:
```
"vendorSourceMap": true
```

Finally run the consuming app using the command:

ng serve --vendor-source-map

edited Nov 7, 2020 at 10:52

fcdt

2,5215 gold badges17 silver badges27 bronze badges

answered Nov 7, 2020 at 5:42

Vishwanath Shankar

845 bronze badges

2 Comments

user557983 Over a year ago

vendorSourceMap seems to be no longer available in ng11

xue zhang Over a year ago

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

JayChase · Accepted Answer · 2020-08-15 01:16:46Z

3

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.

answered Aug 15, 2020 at 1:16

JayChase

11.6k3 gold badges52 silver badges55 bronze badges

1 Comment

Juan Rojas Over a year ago

This answer: stackoverflow.com/a/56669585/403999 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.

Collectives™ on Stack Overflow

Angular CLI 6 - Build Angular Libraries With Source Maps

4 Answers 4

2 Comments

7 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

7 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related