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 https://stackoverflow.com/q/50775520/606662 — Markus Pscheidt, Nov 22 '18 at 14:26

score 13 · Answer 1 · answered Jul 24 '18 at 05:24

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.

This is a great workaround. Please update this thread if Angular publishes a recommended approach if different than what you've done. — smalone, Aug 21 '18 at 18:48
It's also like you need an `angular-dev.json` that the CLI uses unless you specify the `prod` argument. — TheMagnificent11, Oct 07 '18 at 18:34

score 8 · Answer 2 · answered Sep 27 '18 at 10:05

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 '18 at 10:05

ct5845

1,428
3
16
20

Seems to work, but will the source maps be left for a production build? – TheMagnificent11 Oct 06 '18 at 17:49
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 – TheMagnificent11 Oct 06 '18 at 18:01
4

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 – CularBytes Apr 06 '19 at 16:08
Running `ng serve --vendor-source-map` is working for me on ng-cli v7.38 without the build config change above. – JayChase Apr 08 '19 at 02:57
3

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 – Ravi Mashru Jul 24 '19 at 16:39
This answer no longer works - the `"sourceMap": { "vendor": true }` in the accepted answer is the way to go. – crimbo Nov 02 '20 at 18:20
`ng serve --vendor-source-map` is not working for `Angular CLI: 13.3.10`. – andy Jan 26 '23 at 08:21

score 4 · Accepted Answer · edited Nov 07 '20 at 10:52

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

There is no sourceMap property under projects -> library_name -> architect -> build -> options. I'm using ng11. — xue zhang, Feb 13 '22 at 03:52

score 3 · Answer 4 · answered Aug 15 '20 at 01:16

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 '20 at 01:16

JayChase

11,174
2
43
52

This answer: https://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. – Juan Rojas May 06 '21 at 14:20

Angular CLI 6 - Build Angular Libraries With Source Maps

4 Answers4

Linked