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

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, https://github.com/angular/angular-cli/commit/19f04af0777391cc72d096a0e315fe87bab161c6.

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.

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