Better control over sourcemap generation for test

[StefanKern]

🚀 Feature request

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• xi18n
• run
• config
• help
• version
• doc

Description

Currently the karama schema definition allows the following options for generating souremaps.

export declare type SourceMapUnion = boolean | SourceMapClass;
export interface SourceMapClass {
    /**
     * Output sourcemaps for all scripts.
     */
    scripts?: boolean;
    /**
     * Output sourcemaps for all styles.
     */
    styles?: boolean;
    /**
     * Resolve vendor packages sourcemaps.
     */
    vendor?: boolean;
}

however the option for vendor is highly misleading, because setting it to true, actually disables the sourcemaps for all unit tests, See screenshot:

Since we have a very large application, where the unminified test files are very, very large, this slows down the testing significantly. (the vendor.js has a total of 36MB in its unminified state, 15 without sourcemaps).

Describe the solution you'd like

A more fine granular solution to control the souremap generation for unit tests would be helpful. I suggest defining them like this:

export declare type SourceMapUnion = boolean | SourceMapClass;
export interface SourceMapClass {
    /**
     * Output sourcemaps for all scripts.
     */
    scripts?: boolean;
    /**
     * Output sourcemaps for all styles.
     */
    styles?: boolean;
    /**
     * Resolve vendor packages sourcemaps.
     */
    vendor?: boolean;
    /**
     * Resolve application sourcemaps (main.js and all lazyloaded modules).
     */
    application?: boolean;
    /**
     * Resolve test file sourcemaps.
     */
    test?: boolean;
}

Describe alternatives you've considered

I tried modifying the karma.config.js and tsconfig.spec.ts to control the sourcemap generation, but to no avail

[alan-agius4]

Hi @StefanKern,

It's un-clear from the reporting issue what are the values of the other options when you are setting vendor: true.

Vendor soucemaps indeed takes a lot of time and resources to process and that is one reason why that they are on opt-in bases and mainly is intended to be used for debugging purposes and not during normal development workflow.

The proposed new options seems to overlap with the current default behaviour. That when using ng build or ng serve you will get the sourcemaps of the application bundles, and when running ng test you will get the sourcemaps of the testing bundles.

[StefanKern]

Hi @alan-agius4 ,

thank you for your fast replay. I based my example on a freshly created angular 10 application. The only value I changed was setting "sourceMap": { "vendor": false }. This had the effect that no sourcemaps where generated for vendor, main and the tests.

Vendor soucemaps indeed takes a lot of time and resources to process and that is one reason why that they are on opt-in bases and mainly is intended to be used for debugging purposes and not during normal development workflow.

So you mean that vendor sourcemaps are not generated for library projects during normal builds? Because I don't think that is the case, because as I was debugging the unit tests, the debugger showed me the actuall Typescript lines for my tests and application. In the vendor.js file I also found the following references to souremaps:

So the browser even has to load the full sourcemap, because it is inlined in the vendor.js, which is already 8.9 MB in a fresh hello world project:

Thanks for your help, maybe I just got something wrong :)

[alan-agius4]

By setting "sourceMap": { "vendor": false }, you are disabling all form of sourcemaps, because by default value for scripts and styles is false.

To enable sourcemaps you can use one of the below:

Enables local JS and CSS sourcemaps

"sourceMap": true

or

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

The enable local and vendor sourcemaps for both JS and CSS, set the below:

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

[StefanKern]

Yes, but sadtly no combination solves my issue. I want to disable the sorucemaps for the huge vendor.js but enable them for my test and application code.
Setting "sourceMap": { "scripts": true, "styles": true,"vendor": false } had quite a strange effect, because then the souremaps for vendor.js, the application and the tests where generated too. I would have expected that just the script.js has souremaps then:

However this, nor any other combination I tried out solved my issue that I don't want the sourcemaps for the applicaiton and test but not the vendor.js.

[alan-agius4]

I think I see what is the problem. The vendor sourcemap is still being generated, but in fact this is not that that useful because it's doesn't contain all the information from all the node_modules.

In the screenshot above I see 2 requests for the vendor.js files (see: #16160) and non for the sourcemaps and I am also see that the application and tests code have been properly mapped back to the sourcemaps.