External library source maps not included in the vendor chunk

[boyanio]

🐞 Bug report

Command (mark with an x)

- [ ] new
- [ ] build
- [x] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Description

I have a simple Angular application, using an external library my-lib. This library comes with one minified main.js and main.js.map. main.js ends with //# sourceMappingURL=main.js.map.

In angular.json I have enabled "sourceMaps": true and I would expect all vendor source maps to be merged in the final vendors.js.map, but it does not seem to be the case. When I open Developer Tools -> Debugger -> webpack I see the original minified version of my external library, rather than the individual files inside it.

🔬 Minimal Reproduction

1. Create a simple library with 2 ts files and build it using tsc or webpack with sourcemaps. Run npm pack
2. Create a simple Angular application using the library as a npm package. Enable source maps in angular.json
3. Run ng serve and check Developer Tools

🌍 Your Environment

Angular CLI: 7.3.8
Node: 10.16.0
OS: win32 x64
Angular: 7.2.13
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.13.8
@angular-devkit/build-angular      0.13.8
@angular-devkit/build-ng-packagr   0.13.8
@angular-devkit/build-optimizer    0.13.8
@angular-devkit/build-webpack      0.13.8
@angular-devkit/core               7.3.8
@angular-devkit/schematics         7.3.8
@angular/cdk                       7.3.7
@angular/cli                       7.3.8
@angular/material                  7.3.7
@angular/material-moment-adapter   7.3.7
@ngtools/json-schema               1.1.0
@ngtools/webpack                   7.3.8
@schematics/angular                7.3.8
@schematics/update                 0.13.8
ng-packagr                         5.1.0
rxjs                               6.4.0
typescript                         3.2.4
webpack                            4.29.0

[alan-agius4]

Hi @boyanio, that is expected.

By default vendor sourcemaps are not enabled because they take a signification amount of time to generate.

To enable vendor sourcemaps you need to specify the vendorSourceMap option either via command line or angular.json

ng serve --vendorSourceMap

Thanks

[boyanio]

Hi @alan-agius4 Thanks for the suggestion - I thought enabling sourceMap was enough. I did enable vendorSourceMap too, but to no avail - I do not see the individual sources in Developer Tools. Does the vendor source map actually collects each individual source maps from all vendors?

[alan-agius4]

Yeah, you should be able to see them individually in the devtools, if the library offers proper sourcemaps. Are you for example able to view sourcemaps for rxjs? (Note that they might not be listed under webpack)

Try to use CTRL + P in devtools to look for a vendor sourcemap.

I also forgot to mentioned that you still need to enable sourceMap with vendorSourceMap?

[alan-agius4]

@boyanio, managed to solve the issue?

[boyanio]

Hi @alan-agius4 I tried to play around a bit more. I created a simple library and created a npm package out of it along with source maps. Next, I created a new Angular application and did npm i --no-save my-lib.tgz and used my my simple library inside app.component.ts. I enabled both source map options and when running npm start, I can see the source inside Developer Tools. However, when doing the same thing inside my real project (which is a way bigger), the source map does not seem to work. My angular.json looks like this in both projects:

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "outputPath": "dist/apps/angular",
    "index": "apps/angular/src/index.html",
    "main": "apps/angular/src/main.ts",
    "polyfills": "apps/angular/src/polyfills.ts",
    "tsConfig": "apps/angular/tsconfig.app.json",
    "aot": true,
    "sourceMap": true,
    "vendorSourceMap": true,
    "assets": [...],
    "styles": [...]
},

Is there any limit on something that could break when the project is bigger?

[alan-agius4]

@boyanio, no there isn't any limit. Another possibility is that the version you are using in your other other project has a bug that was fixed.

[boyanio]

It seems indeed that it has been fixed in @angular-devkit/build-angular 0.801.3

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}