angular-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, 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.
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 103
- Comments: 56 (5 by maintainers)
Commits related to this issue
- fix: test bug in angular-cli https://github.com/angular/angular-cli/issues/7296 — committed to RADAR-base/RADAR-Dashboard by herkulano 7 years ago
- Have all unit tests passing, comitting from yesterday. This was particularly tricky due to an angular-cli bug, documented here: https://github.com/angular/angular-cli/issues/7296 Recommendation: use... — committed to bcgov/MyGovBC-MSP by acoard 7 years ago
- fix failing unit test on travis * Reference: https://github.com/angular/angular-cli/issues/7296 — committed to harunurhan/ng2-json-editor by harunurhan 7 years ago
- upgrade tslint codelyzer, fix test * Fixes existing lint errors. * mport FormsModule for required test modules * Fix failing unit test message on travis Reference: https://github.com/angular/angul... — committed to harunurhan/ng2-json-editor by harunurhan 7 years ago
- Do not serve sourcemaps while running tests See https://stackoverflow.com/a/45591221 and https://github.com/angular/angular-cli/issues/7296 — committed to gldraphael/chordsheet-editor by gldraphael 7 years ago
- turn off source maps for ng test There's a bug preventing the actual error message to be shown when executing tests - this is the workaround. See: https://github.com/angular/angular-cli/issues/7296 — committed to test-editor/web-testexec-navigator by deleted user 6 years ago
- Debug more easily "[object ErrorEvent] thrown" exceptions (https://github.com/angular/angular-cli/issues/7296) — committed to strongbox/strongbox-web-ui by steve-todorov 6 years ago
- disable source maps for unit testing workaround for known bug in Angular CLI https://github.com/angular/angular-cli/issues/7296 — committed to test-editor/web-testeditor-commons by deleted user 6 years ago
- migrate and adapt indicator box component from workspace navigator (#20) * migrate and adapt indicator box component from workspace navigator * disable source maps for unit testing workaround f... — committed to test-editor/web-testeditor-commons by deleted user 6 years ago
@playground as a temporary workaround you can run tests with
--sourcemaps=falseto 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.@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:Where
entitywas 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)Hi all, if angular 2+ project has ejected, need: in karma.conf.js in angularCli: {… add sourcemaps: false, for eample: angularCli: { environment: ‘dev’, sourcemaps: false },
In my case the error was reported to unrelated test, tried to comment out tests until I found the cause.
The test alone (
fit) was passing but with all test running failed causing jasmine to report other test as faield - not sure why.In my case I was missing the error handler in
subscribe()function:I have found the cause. It has nothing to do with karma, but the issue is triggered by the
source-map-supportpackage which is installed by@angular/cli.The Angular source maps refer to paths like
ng:///DynamicTestModule/YourComponent.ngfactory.jswhich triggers CORS errors.Should be fixed by https://github.com/evanw/node-source-map-support/pull/222 and/or by the Angular CLI.
@diminutivesloop Thanks, it worked!
Just for completeness, in
angular.jsonthe property is calledsourceMap. If the flag--sourceMap=false(note the capital M) is passed, it works.I’m experiencing this issue with CLI 1.6.3. Using
--sourcemaps=falsedoes not help at all.When the project has been ejected, how can we translate the
--source=falseoption intokarma.conf.jsoptions? https://github.com/angular/angular-cli/issues/6583 mentions a few options but nothing seems very conclusive.In angular 6, the cryptic error message related to http call is now replaced with
[object ErrorEvent] thrownAlso for command line:
--source-map=falseargument continues to workEDIT: in our case we also ended up getting
[object ErrorEvent] thrownwhen change detection threw an error that a component is destroyed, but something tried to update the view (turned out to be not mocked setTimeout in some previous test). The correct error message was visible in chrome console, but only cryptic one in command line window. This wasn’t obvious as we usually run the tests in headless chromeAngular CLI v6 doesn’t seem to support the
--sourcemap=falseflag:ng versionThis approach,
ng test -sm=falseworks, but I do not think it has solved the fundamental problem. I did some experiments today, studied it in depth, and share some results @here, hoping to be helpful.In Chrome, some additional information appeared in the browser console of Karma DEBUG runner:
I think the root cause is here.
So, I switch to Firefox. It works.
So, I think the fundamental reason here is that Chrome’s cross-domain detection is stronger than Firefox, blocking the
ng:///protocol in the sourcemaps, causing this issue.So, I think, maybe we can just replace the “ng: ///” prefix with a prefix such as “http: ///” to resolve this issue.
I’m experiencing this issue - wasted a good 2-3 hours until I found this.
Any plans to fix?
@UrsMetz I’m using Angular Cli 1.5.4 here and nothing has gotten better. This is pretty annoying.
@benelliott sorry, should have been more clear. There is no stack trace, and I was hoping that
--sourcemaps=falsewould produce a more traceable error.If you find a similar or different issue, please open a new issue so we can track that one. Original issue was fixed.
Experiencing this issue with CLI 1.6.1
I found that this only happens when an error occurs during CD in my case. This can range from things like you template referencing components that aren’t in the module or having an exception thrown in a lifecycle hook or any view related errors.
to confirm this you can do
with your component looking like
Now if you run with
ng testthe browser will hang and eventually crash, you can see the error in the chrome log. However, if you remove the error from ngOnInit then it throws it as expected and dosen’t break then swapping tong test --sm=falseit always works as expected@Viktor-Bredihin it’s
--source-map=falsenowI saw an
"Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'ng:///DynamicTestModule/..too when writing a new component test.In my case the reason was a poorly written template with
*ngIf="queryTable.data". Revising this to*ngIf="queryTable && queryTable.data"solved the problem for me.I think this confirms the observation from @Toxicable https://github.com/angular/angular-cli/issues/7296#issuecomment-347359285
any update? sourceMap=false doesn’t help (angular-cli 6.0.8)
I am using angular cli v 1.6.5. In my case
ng test --sourcemap=falseis not returning any error butng testis giving the error similar to mentioned in original issue.As I need to generate Istanbul code coverage report, which requires sourcemap for typescript files to generate it properly, I tried to run tests using Firefox instead of Chrome and it worked well.
the
ng:///prefix in source-map is added by : https://github.com/angular/angular/blob/master/packages/compiler/src/compile_metadata.ts#L683 and then loaded by the CLI viasource-map-loader.So, I think we can convert all sourcemaps to base64 sourceMapUrl for testing.
I see this error ‘[object ErrorEvent] thrown’ when I run all tests. There are always 1 - 3 test failing with this error, and it is not always the same tests failing. Run it a second time and other tests will fail. If I run the spec which contains the fail test (the spec itself contains multiple tests) then the test does not fail.
Running ‘ng test --sourcemaps=false’ does not provide any additional information.
I’m using chrome, and the following version.
For me it’s failing in addEventListner()
Running cli 1.2.4