ng build generating vendor source maps even if set to false

[dwilches]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

I don't know, first detected in ng-cli's version 11.0.7

Description

In angular.json I added a configuration like follows:

"configurations": {
    "dev": {
        "optimization": true,
        "outputHashing": "all",
        "sourceMap": {
            "scripts": true,
            "styles": true,
            "hidden": false,
            "vendor": false
        },
        "namedChunks": true,
        "extractLicenses": false,
        "vendorChunk": true,
        "buildOptimizer": true
    },
    "production": {
      ...

Then I build with ng build --configuration=dev and, taking a look at the dist folder, I see the vendor.*.js files are getting source maps generated:

~/my-project/ $ ll dist/vendor*
-rw-r--r-- 1 dwilches 1.3M Jan 26 15:52 dist/vendor-es2015.d5ada0d379d2aba7da41.js
-rw-r--r-- 1 dwilches 7.5M Jan 26 15:52 dist/vendor-es2015.d5ada0d379d2aba7da41.js.map
-rw-r--r-- 1 dwilches 1.4M Jan 26 15:52 dist/vendor-es5.d5ada0d379d2aba7da41.js
-rw-r--r-- 1 dwilches 7.6M Jan 26 15:52 dist/vendor-es5.d5ada0d379d2aba7da41.js.map

But notice in my source map config I set "vendor": false.

🔬 Minimal Reproduction

1. ng new hello: accept all defaults
2. Add this configuration to angular.json:

"dev": {
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": {
        "scripts": true,
        "styles": true,
        "hidden": false,
        "vendor": false
    },
    "namedChunks": true,
    "extractLicenses": false,
    "vendorChunk": true,
    "buildOptimizer": true
},

3. ng build --configuration=dev
4. ls -l dist/hello/vendor*

🔥 Exception or Error

There will be a source map for vendor inside of dist/hello. But there shouldn't be as it was configured as disabled.

🌍 Your Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 11.0.7
Node: 10.23.1
OS: linux x64

Angular: 11.0.9
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.7
@angular-devkit/build-angular   0.1100.7
@angular-devkit/core            11.0.7
@angular-devkit/schematics      11.0.7
@angular/cli                    11.0.7
@schematics/angular             11.0.7
@schematics/update              0.1100.7
rxjs                            6.6.3
typescript                      4.0.5

Anything else relevant?

[alan-agius4]

Hi @dwilches,

Thanks for opening this request, however this is the working as intended.

When vendor sourcemaps is disabled, the vendor sourcemap file is still generated. Although this doesn't the contains of the resolved 3rd party libraries.

There are two main reasons for this:

1. //# sourceMappingURL comments will not be removed from the source file of the libraries and a warning will be issued in the console because the sourcemap cannot be loaded. (Source map error with RC version update #19236)
2. Having the vendor sourcemap file still improves debugging experience, even when the sourcemaps are not fully resolved.

vendor.js.map generated with vendor: false

vendor.js.map not generated

[gorshkov-leonid]

@alan-agius4 In my case I have 29MB of vendor.js.map and source map generation takes 22min (because of the usage of fat corporate libraries). Without sourceMap the build takes 4min.
I also expected vendor.js to be disabled with any option.
But for now, as I understand the only way to make build faster is to disable sourceMap completely.

P. S. fat libraries could be not only corporate. For example three.js, yfiles, monaco-editor e.t.c. Is there any way to cut down generation time without a complete refusal of the source map?

Additional info:

Angular CLI: 11.1.1
Node: 12.18.3
OS: win32 x64

Angular: 11.1.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1101.1
@angular-devkit/build-angular   0.1101.1
@angular-devkit/core            11.1.1
@angular-devkit/schematics      11.1.1
@angular/cli                    11.1.1
@schematics/angular             11.1.1
@schematics/update              0.1101.1
rxjs                            6.6.3
typescript                      4.1.3

angular.json:

...
 "configurations": {
             ...
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": {
                "scripts": true,
                "styles": false,
                "hidden": false,
                "vendor": false
              },
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": true,
              ...
}
...

[gorshkov-leonid]

Or maybe I am wrong and the existence of fat vendor.js.map that includes all 3rd-party libs (checked it via source-map-explorer) is a problem? Do you know why all libs are included source map?

[alan-agius4]

Possibly one of the reasons why the generation is slow is due to optimization and buildOptimizer being used in combination with sourceMaps.

The mentioned 2 options are not meant to be during development.

if you can provide a reproduction I’ll happily take a look.

[gorshkov-leonid]

@alan-agius4 Thank you in advance. I've prepared an example with monaco-editor: https://github.com/gorshkov-leonid/test-source-map . There buildOptimizer and optimization flags are explicitly set to false

Don't pay attention to code where web workers for monaco-editor are bundled.
Just call npm install && npm run build. And look into build/dist/test-source-map/vendor.js.map:

cd ./build/dist/test-source-map/
source-map-explorer --no-border-checks true vendor.js

In my case, it is about 9MB

[alan-agius4]

Thanks for the reproduction.

The monaco-editor source is huge, this causes the sourcemap to grow quite a lot because the source content is included in vendor sourcemap.

This is working as expected and as documented in here https://angular.io/guide/workspace-config#source-map-configuration because when vendor is set to false vendor source-maps are not resolved to actually source-map as this process is considerably slow.

It is also important to point out that vendorChunk is only meant to be used for development purposes and shouldn't be used when using the optimization option. Using vendor chunking can cause several optimization bailouts.

At the point I see two options here;

1. Extend the CLI using 3rd party builds such as https://github.com/manfredsteyer/ngx-build-plus and https://www.npmjs.com/package/@angular-builders/custom-webpack
2. Provide a way to truly disable vendor sourcemaps, this would however has some cavets, such as the issue with stacktraces explained above.

I think for the time being, option 1 is the best way option to achieve this. We can re-evaluate option 2, if we see more community members requiring this.

[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.}