Solvedangular cli 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, 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.

35 Answers

✔️Accepted Answer

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

Other Answers:

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

@kamok Try running ng test --sourcemaps=false (and not using npm)

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.

@diminutivesloop Thanks, it worked!

Just for completeness, in angular.json the property is called sourceMap.
If the flag --sourceMap=false (note the capital M) is passed, it works.

More Issues: