Angular-cli: Update source-map-support to 0.5.9 to resolve issue with source maps for karma runs (ng test) in v1.7.X

[arimus]

Bug Report or Feature Request (mark with an x)

- [X] bug report -> please search issues before submitting
- [ ] feature request

Command (mark with an x)

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

Versions

Angular CLI: 1.7.4
Node: 8.9.4
OS: darwin x64
Angular: 5.2.4

Repro steps

When running karma tests, stack traces are hidden when running via the following, unless --source-map=false is specified, however then the line numbers are incorrect:

ng test --config karma.conf.js

The log given by the failure

Stack trace in the console running karma using Chrome:

[object ErrorEvent] thrown

Stack trace in the Chrome browser console:

Failed to load ng:///DynamicTestModule/ShiftDetailCellComponent.ngfactory.js: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. (anonymous) @ zone.js:2956 polyfills.bundle.js:10484 Uncaught DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'ng:///DynamicTestModule/ShiftDetailCellComponent.ngfactory.js'. at http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:2956:1 at XMLHttpRequest.proto.(anonymous function) [as send] (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:1372:1)

CORS errors due to the mapping issues.

Desired functionality

The recently released version of source-map-support now catches the CORS errors and produces the correct stack trace as one would expect. See:

https://github.com/evanw/node-source-map-support/pull/222

Mention any other details that might be useful

I'm assuming there has to be a big report on this somewhere, but I couldn't find it. There are similar issues under other projects as people have attempted to get to the root of this issue. One of those is:

https://github.com/karma-runner/karma/issues/2852

As mentioned in my post here, I have confirmed that if I delete the bundled version of source-map-support and install the latest as a peer dependency, the issue is resolved. I'm not sure if there are any other issues that may result from a minor version bump and I haven't ran through all of the test suite for @angular/cli to verify yet, but this one issue does appear to be resolved by the new rev.

It didn't appear that source-map-support is still used in 6.0.X of the CLI, so not sure if this is even an issue with newer versions of the CLI. But if this can be packed for us to get a 1.7.5 version of the CLI, that would rock for those of us that want to migrate to a newer rev, but can't yet do so.

Thanks!

[TitaneBoy]

The use of [email protected] doesn't seem to resolve the main issue. I've installed from scratch my node_modules and after executing my test (ng test), I still have the same issue

.

I have of course the last version of source-map-support

Here is my package.json:

{
  "name": "mywebclient",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint --type-check",
    "e2e": "ng e2e",
  },
  "dependencies": {
    "@angular/animations": "6.1.3",
    "@angular/cdk": "6.4.6",
    "@angular/common": "6.1.3",
    "@angular/compiler": "6.1.3",
    "@angular/core": "6.1.3",
    "@angular/flex-layout": "6.0.0-beta.17",
    "@angular/forms": "6.1.3",
    "@angular/http": "6.1.3",
    "@angular/material": "6.4.6",
    "@angular/platform-browser": "6.1.3",
    "@angular/platform-browser-dynamic": "6.1.3",
    "@angular/router": "6.1.3",
    "@ngx-translate/core": "10.0.2",
    "@ngx-translate/http-loader": "3.0.1",
    "@types/chart.js": "2.7.31",
    "bootstrap": "4.1.3",
    "chart.js": "2.7.2",
    "chartjs-plugin-zoom": "0.6.4",
    "core-js": "2.5.7",
    "font-awesome": "4.7.0",
    "hammerjs": "2.0.8",
    "material-design-icons": "3.0.1",
    "ng-event-source": "1.0.11",
    "rxjs": "6.2.2",
    "typedoc": "0.12.0",
    "typescript": "2.9.2",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "0.7.4",
    "@angular/cli": "6.1.4",
    "@angular/compiler-cli": "6.1.3",
    "@angular/language-service": "6.1.3",
    "@types/jasmine": "2.8.8",
    "@types/jasminewd2": "2.0.3",
    "@types/node": "10.7.1",
    "codelyzer": "4.4.4",
    "jasmine-core": "3.2.1",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "3.0.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-coverage": "1.1.2",
    "karma-coverage-istanbul-reporter": "2.0.1",
    "karma-firefox-launcher": "1.1.0",
    "karma-jasmine": "1.1.2",
    "karma-jasmine-html-reporter": "1.3.1",
    "karma-json-reporter": "1.2.1",
    "karma-junit-reporter": "1.2.0",
    "ngx-i18nsupport": "0.17.0",
    "protractor": "5.4.0",
    "ts-node": "7.0.1",
    "tslint": "5.11.0"
  }
}

[arimus]

Important to note that @TitaneBoy is using a newer version of the CLI (6.0.X) than the reported issue here, so I'm not sure what other issues he may be facing. I was only able to verify with the latest 1.6.X and 1.7.X.

[rrjohnson85]

I'm seeing the same error with:

"dependencies": {
    "@angular/animations": "^6.1.2",
    "@angular/cdk": "^6.4.5",
    "@angular/common": "^6.1.2",
    "@angular/compiler": "^6.1.2",
    "@angular/core": "^6.1.2",
    "@angular/flex-layout": "^6.0.0-beta.17",
    "@angular/forms": "^6.1.2",
    "@angular/http": "^6.1.2",
    "@angular/material": "^6.4.5",
    "@angular/platform-browser": "^6.1.2",
    "@angular/platform-browser-dynamic": "^6.1.2",
    "@angular/router": "^6.1.2",
    "angular-token": "6.0.1",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.4",
    "hammerjs": "^2.0.8",
    "rxjs": "^6.0.0",
    "web-animations-js": "^2.3.1",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.7.0",
    "@angular/cli": "~6.1.2",
    "@angular/compiler-cli": "^6.1.2",
    "@angular/language-service": "^6.1.2",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "husky": "^0.14.3",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "npm-run-all": "^4.1.3",
    "precise-commits": "^1.0.2",
    "prettier": "^1.14.0",
    "protractor": "^5.4.0",
    "stylelint": "^9.4.0",
    "stylelint-config-prettier": "^3.3.0",
    "stylelint-config-recommended-scss": "^3.2.0",
    "stylelint-config-standard": "^18.2.0",
    "stylelint-scss": "^3.2.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "tslint-config-prettier": "^1.14.0",
    "typescript": "~2.9.2"
  }

⇒  ng version

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


Angular CLI: 6.1.3
Node: 8.9.3
OS: darwin x64
Angular: 6.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.7.3
@angular-devkit/build-angular     0.7.3
@angular-devkit/build-optimizer   0.7.3
@angular-devkit/build-webpack     0.7.3
@angular-devkit/core              0.7.3
@angular-devkit/schematics        0.7.3
@angular/cdk                      6.4.5
@angular/cli                      6.1.3
@angular/flex-layout              6.0.0-beta.17
@angular/material                 6.4.5
@ngtools/webpack                  6.1.3
@schematics/angular               0.7.3
@schematics/update                0.7.3
rxjs                              6.2.2
typescript                        2.9.2
webpack                           4.9.2

[rrjohnson85]

Seems related to https://github.com/angular/angular-cli/issues/7296

[rrjohnson85]

Please disregard, my problem was self-inflicted... 🤦‍♂️

[filipesilva]

@arimus we still use source-map-support in https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/karma.ts#L78-L91. We depend on "source-map-support": "^0.5.0" so 0.5.9 should be automatically picked up on reinstalls. If someone is interested in updating the minimum to 0.5.9 I'm happy to review that PR.

Reading through https://github.com/karma-runner/karma/issues/2852 I get the feeling this can happen due to a lot of things. One of them is CORS, and the error message becomes better with the new source-map-support version. But it also seems to happen with a lot of async behaviour.

We should take a look at the examples in https://github.com/karma-runner/karma/issues/2852 and figure out why our error reporting in Angular CLI doesn't show the right error messages.

[filipesilva]

@arimus I forgot to say: it's very unlikely that we'll release a patch for 1.x for this, as 6.x is our LTS right now and we only release patches to 1.x for severe security issues.

[vladi4k]

@Input() valueA: BehaviorSubject<any>; => [object ErrorEvent] thrown
@Input() valueA: BehaviorSubject<any> = new BehaviorSubject(null); => pass

[Sharondio]

Any updates on this? It seems to be getting worse the more tests I add.

[Sharondio]

Yep, still happening. Will this fix drop in a 6x update or will I have to move to 7?

[alan-agius4]

Hi all, this might have been solved @angular-devkit/build-angular version 0.8.0 with the following https://github.com/angular/angular-cli/pull/11970.

If the problem persists can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[alan-agius4]

Closing as no reproduction was provided.

[angular-automatic-lock-bot[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._}