sourceMap option for ng test in angular.json is not working correctly

[jvalkeejarvi]

🐞 Bug report

Command (mark with an x)

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

Is this a regression?

I suspect that this option has never worked correctly with ng test

Description

Setting styles false under sourceMap option of test disables source maps for ts code

🔬 Minimal Reproduction

• create new project with ng new
• edit test target of angular.json file to be as following:

        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "sourceMap": {
              "scripts": true,
              "styles": false,
              "vendor": true
            },
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },

• do a modification to app.component.spec.ts file that will cause test to fail
• run tests with command ng test

🔥 Exception or Error

HeadlessChrome 72.0.3626 (Linux 0.0.0) AppComponent should render title in a h1 tag FAILED
        Expected ' Welcome to source-map-bug! ' to contain 'Welcome to source-map-bu!'.
            at UserContext. (http://localhost:9876/_karma_webpack_/main.js:307:58)
            at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/polyfills.js:2866:26)
            at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/vendor.js:83958:39)
            at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/polyfills.js:2865:52)
HeadlessChrome 72.0.3626 (Linux 0.0.0): Executed 3 of 3 (1 FAILED) (0 secs / 0.307 secs)
HeadlessChrome 72.0.3626 (Linux 0.0.0) AppComponent should render title in a h1 tag FAILED
        Expected ' Welcome to source-map-bug! ' to contain 'Welcome to source-map-bu!'.
            at UserContext. (http://localhost:9876/_karma_webpack_/main.js:307:58)
            at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/polyfills.js:2866:26)
            at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/vendor.js:83958:39)
HeadlessChrome 72.0.3626 (Linux 0.0.0): Executed 3 of 3 (1 FAILED) (0.369 secs / 0.307 secs)

🌍 Your Environment

Angular CLI: 7.3.3
Node: 10.15.1
OS: linux x64
Angular: 7.2.6
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router, upgrade

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.3
@angular-devkit/build-angular     0.13.3
@angular-devkit/build-optimizer   0.13.3
@angular-devkit/build-webpack     0.13.3
@angular-devkit/core              7.3.3
@angular-devkit/schematics        7.3.3
@angular/cli                      7.3.3
@ngtools/webpack                  7.3.3
@schematics/angular               7.3.3
@schematics/update                0.13.3
rxjs                              6.4.0
typescript                        3.2.4
webpack                           4.29.5

[jvalkeejarvi]

I found this issue when I was fighting with another ng test related problem: karma-runner/karma#3267. Could it be so that vendor source maps are generated by default and that makes source map files too large to load quicky enough?

[alan-agius4]

@jvalkeejarvi, vendor sourcemaps are off by default.

[jvalkeejarvi]

Thanks @alan-agius4 for quick fix!

I think there is some problem with vendor source maps when running ng test. I'll open another issue for that.

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