Regression wrong error message during tests if runtime error occurs after constructor

[JSMike]

Bug Report or Feature Request (mark with an x)

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

Versions.

@angular/cli: 1.2.2
node: 6.11.0
os: win32 x64
@angular/animations: 4.3.3
@angular/common: 4.3.3
@angular/compiler: 4.3.3
@angular/core: 4.3.3
@angular/forms: 4.3.3
@angular/http: 4.3.3
@angular/platform-browser: 4.3.3
@angular/platform-browser-dynamic: 4.3.3
@angular/router: 4.3.3
@angular/cli: 1.2.2
@angular/compiler-cli: 4.3.3
@angular/language-service: 4.3.3

Repro steps.

• Create new project with @angular/cli version 1.2.2 or newer
• Modify src/app/app.component.ts, add OnInit interface and add any runtime error to ngOnInit
• run ng test

Simple runtime error example:

...
export class AppComponent implements OnInit {
  title = 'app';
  example: string;

  ngOnInit() {
    console.log(this.example.length);
  }
}

The log given by the failure.

 Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'ng:///DynamicTestModule/AppComponent_Host.ngfactory.js'.
   at http://localhost:9876/_karma_webpack_/polyfills.bundle.js:5182:35
   at XMLHttpRequest.proto.(anonymous function) [as send] (http://localhost:9876/_karma_webpack_/polyfills.bundle.js:3767:20)
   at Array.<anonymous> (node_modules/source-map-support/browser-source-map-support.js:107:176)
   at node_modules/source-map-support/browser-source-map-support.js:101:106
   at Array.<anonymous> (node_modules/source-map-support/browser-source-map-support.js:107:474)
   at node_modules/source-map-support/browser-source-map-support.js:101:106
   at a (node_modules/source-map-support/browser-source-map-support.js:101:312)
   at b (node_modules/source-map-support/browser-source-map-support.js:104:348)
   at node_modules/source-map-support/browser-source-map-support.js:105:245
   at Array.map (native)

Desired functionality.

Display the actual error message with details about the error. Here's the output from 1.2.1.

@angular/cli: 1.2.1
node: 6.11.0
os: win32 x64
@angular/animations: 4.3.3
@angular/common: 4.3.3
@angular/compiler: 4.3.3
@angular/core: 4.3.3
@angular/forms: 4.3.3
@angular/http: 4.3.3
@angular/platform-browser: 4.3.3
@angular/platform-browser-dynamic: 4.3.3
@angular/router: 4.3.3
@angular/cli: 1.2.1
@angular/compiler-cli: 4.3.3
@angular/language-service: 4.3.3

Failed: Cannot read property 'length' of undefined
TypeError: Cannot read property 'length' of undefined
    at AppComponent.webpackJsonp.../../../../../src/app/app.component.ts.AppComponent.ngOnInit (http://localhost:9876/_karma_webpack_/main.bundle.js:120:33)
    at checkAndUpdateDirectiveInline (http://localhost:9876/_karma_webpack_/vendor.bundle.js:47071:19)
    at checkAndUpdateNodeInline (http://localhost:9876/_karma_webpack_/vendor.bundle.js:48567:17)
    at checkAndUpdateNode (http://localhost:9876/_karma_webpack_/vendor.bundle.js:48506:16)
    at debugCheckAndUpdateNode (http://localhost:9876/_karma_webpack_/vendor.bundle.js:49367:59)
    at debugCheckDirectivesFn (http://localhost:9876/_karma_webpack_/vendor.bundle.js:49308:13)
    at Object.eval [as updateDirectives] (ng:///DynamicTestModule/AppComponent_Host.ngfactory.js:8:5)
    at Object.debugUpdateDirectives [as updateDirectives] (http://localhost:9876/_karma_webpack_/vendor.bundle.js:49293:21)
    at checkAndUpdateView (http://localhost:9876/_karma_webpack_/vendor.bundle.js:48473:14)
    at callWithDebugContext (http://localhost:9876/_karma_webpack_/vendor.bundle.js:49693:42)

Mention any other details that might be useful.

This error is still occurring in 1.3.0-rc.5, the regression was added in 1.2.2, 19f04af.

If a runtime errors occur during the constructor then the proper error displays, but sourcemaps still fail to show line in TypeScript.

It would be best if the actual error and line in typescript could be referenced.

[playground]

For me it's failing in addEventListner()

  receiveMessage() {
    this.commonService.getNativeWindow().addEventListener(
      'message',
      (e) => {
        if(e.origin.match(/localhost/) && e.data['myIframe']) {
          if(!this.bypassCookie) {
            this.getConfig(e.data);
          }
        }
      }, false)
  }

zone.js:2642 XMLHttpRequest cannot load ng:///DynamicTestModule/MyComponent_Host.ngfactory.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
(anonymous) @ zone.js:2642
proto.(anonymous function) @ zone.js:1227
(anonymous) @ browser-source-map-support.js:107
(anonymous) @ browser-source-map-support.js:101
(anonymous) @ browser-source-map-support.js:107
(anonymous) @ browser-source-map-support.js:101
a @ browser-source-map-support.js:101
b @ browser-source-map-support.js:104
(anonymous) @ browser-source-map-support.js:105
f @ browser-source-map-support.js:105
ExceptionFormatter.stack @ jasmine.js:1500
stack @ jasmine.js:1645
buildExpectationResult @ jasmine.js:1610
expectationResultFactory @ jasmine.js:655
Spec.addExpectationResult @ jasmine.js:342
onException @ jasmine.js:398
onException @ jasmine.js:373
onException @ jasmine.js:1988
handleException @ jasmine.js:1992
attemptSync @ jasmine.js:1952
QueueRunner.run @ jasmine.js:1938
(anonymous) @ jasmine.js:1962
(anonymous) @ jasmine.js:1905
(anonymous) @ testing.es5.js:92
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
webpackJsonp.../../../../zone.js/dist/async-test.js.AsyncTestZoneSpec.onInvoke @ async-test.js:49
webpackJsonp.../../../../zone.js/dist/proxy.js.ProxyZoneSpec.onInvoke @ proxy.js:76
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:141
(anonymous) @ testing.es5.js:87
(anonymous) @ async-test.js:38
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:424
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:191
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:1829
setTimeout (async)
scheduleTask @ zone.js:1839
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:235
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:258
(anonymous) @ zone.js:1865
proto.(anonymous function) @ zone.js:1227
(anonymous) @ async-test.js:36
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:141
webpackJsonp.../../../../zone.js/dist/async-test.js.AsyncTestZoneSpec._finishCallbackIfDone @ async-test.js:35
webpackJsonp.../../../../zone.js/dist/async-test.js.AsyncTestZoneSpec.onHasTask @ async-test.js:68
webpackJsonp.../../../../zone.js/dist/proxy.js.ProxyZoneSpec.onHasTask @ proxy.js:116
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:444
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:464
webpackJsonp.../../../../zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:288
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:208
drainMicroTaskQueue @ zone.js:595
Promise resolved (async)
scheduleMicroTask @ zone.js:578
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:413
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:235
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:255
webpackJsonp.../../../../zone.js/dist/jasmine-patch.js.jasmine.QueueRunner.ZoneQueueRunner.execute @ jasmine-patch.js:129
queueRunnerFactory @ jasmine.js:714
TreeProcessor.execute @ jasmine.js:2426
Env.execute @ jasmine.js:776
(anonymous) @ adapter.js:336
../../../../../src/test.ts @ test.ts:32
__webpack_require__ @ bootstrap 8398b79f44fceec48211:54
webpackJsonpCallback @ bootstrap 8398b79f44fceec48211:25
(anonymous) @ main.bundle.js:1
zone.js:195 Uncaught DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'ng:///DynamicTestModule/MyComponent_Host.ngfactory.js'.
    at http://localhost:9876/_karma_webpack_/webpack:/Users/ljeff/git_repo/sandbox/angular/~/zone.js/dist/zone.js:2642:1
    at XMLHttpRequest.proto.(anonymous function) [as send] (http://localhost:9876/_karma_webpack_/webpack:/Users/ljeff/git_repo/sandbox/angular/~/zone.js/dist/zone.js:1227:1)
    at Array.<anonymous> (http://localhost:9876/base/node_modules/@angular/cli/node_modules/source-map-support/browser-source-map-support.js:107:176)
    at http://localhost:9876/base/node_modules/@angular/cli/node_modules/source-map-support/browser-source-map-support.js:101:106
    at Array.<anonymous> (http://localhost:9876/base/node_modules/@angular/cli/node_modules/source-map-support/browser-source-map-support.js:107:474)
    at http://localhost:9876/base/node_modules/@angular/cli/node_modules/source-map-support/browser-source-map-support.js:101:106
    at a (http://localhost:9876/base/node_modules/@angular/cli/node_modules/source-map-support/browser-source-map-support.js:101:312)
    at b (http://localhost:9876/base/node_modules/@angular/cli/node_modules/source-map-support/browser-source-map-support.js:104:348)
    at http://localhost:9876/base/node_modules/@angular/cli/node_modules/source-map-support/browser-source-map-support.js:105:245
    at Array.map (<anonymous>)

Running cli 1.2.4

[JSMike]

@playground as a temporary workaround you can run tests with --sourcemaps=false to see the actual error message but lets keep this issue more generic, this issue occurs with any runtime error, as per the example. Your service/function may not be returning what you expect, you'll see a better message with sourcemaps off.

[nathanBrenner]

@playground I had this same issue, and when I ran ng test --sourcemaps=false, I got feedback on the test that failed like "TypeError: Cannot read property 'count' of undefined", where I had a child component like this:

<span>{{entity.count}}</span>

Where entity was defined in the parent component, and defined asynchronously. So I added the safe navigation operator to the property binding like {{entity?.count}}, and that error went away.

[playground]

@JSMike @nathanBrenner thanks, I will give that a try.

[alexciesielski]

@nathanBrenner thanks, disabling sourcemaps for unit tests lets me now debug the actual error

I have a component with a formGroup, and I accessed its status value in my template. During unit-tests the formgroup was undefined, which caused a runtime null-pointer. The error message was the same as OP.

[sharikovvladislav]

I have same result on 1.3.0:

sharikovvlad:ng2-diary-book svlad$ ng --version
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.3.0
node: 8.3.0
os: darwin x64
@angular/animations: 4.3.5
@angular/cdk: 2.0.0-beta.8
@angular/common: 4.3.5
@angular/compiler: 4.3.5
@angular/core: 4.3.5
@angular/forms: 4.3.5
@angular/http: 4.3.5
@angular/material: 2.0.0-beta.8
@angular/platform-browser: 4.3.5
@angular/platform-browser-dynamic: 4.3.5
@angular/router: 4.3.5
@angular/cli: 1.3.0
@angular/compiler-cli: 4.3.5
@angular/language-service: 4.3.5

Same inputs and outputs. I have some component with exception and I get error like topic started mentioned. I expect that I will see exception.

[adrienplg]

When the project has been ejected, how can we translate the --source=false option into karma.conf.js options?
#6583 mentions a few options but nothing seems very conclusive.

[kuncevic]

Had that issue until I just reinstalled the node_modules.
Running angular cli 1.4.9 on Windows with npm 5.5.1, node 8.7.0

[kamok]

Sadly, the npm test --source=false flag does not work for me. I still can't see the right error message. I've also tried doing rm -rf node_modules && npm cache clean && npm install.

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.4.4
node: 6.9.1
os: darwin x64
@angular/animations: 4.4.6
@angular/cdk: 2.0.0-beta.12
@angular/common: 4.4.6
@angular/compiler: 4.4.6
@angular/core: 4.4.6
@angular/flex-layout: 2.0.0-beta.9-7dcd97b
@angular/forms: 4.4.6
@angular/http: 4.4.6
@angular/material: 2.0.0-beta.12
@angular/platform-browser: 4.4.6
@angular/platform-browser-dynamic: 4.4.6
@angular/router: 4.4.6
@angular/cli: 1.4.4
@angular/compiler-cli: 4.4.6
@angular/language-service: 4.4.6
typescript: 2.3.4