Add debug context details to ExpressionChangedAfterItHasBeenCheckedError message

[schmuli]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
When an ExpressionChangedAfterItHasBeenCheckedError is displayed in the Browser console, or in a Karma reporter, no information about which component and property caused the error to occur.

Desired behavior
Include the information about which component and property caused the error in the Error's message, seeing as the data already exists in the Debug Context which is included in the error too.

Minimal reproduction of the problem with instructions
Below is the first few lines printed by the karma-mocha-reporter when such an error occurs in a unit-test:

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'DATE'.
    at viewDebugError (node_modules/@angular/core/bundles/core.umd.js:8611:32) [angular]
    at expressionChangedAfterItHasBeenCheckedError (node_modules/@angular/core/bundles/core.umd.js:8589:12) [angular]
    at checkBindingNoChanges (node_modules/@angular/core/bundles/core.umd.js:8753:15) [angular]
    at checkNoChangesNodeInline (node_modules/@angular/core/bundles/core.umd.js:12187:9) [angular]
    at checkNoChangesNode (node_modules/@angular/core/bundles/core.umd.js:12155:9) [angular]

What is the motivation / use case for changing the behavior?
Since the error can be caused by any component in the component tree, even when testing a specific component that contains child components, it is very difficult to pinpoint the actual cause, without having to have to resort to debugging the Angular code to catch the actual error instance.

Please tell us about your environment:

• Angular version: 4.0.3
• Browser: [all]
• Language: [all]
• Node (for AoT issues): node --version = 7.7.3

[tbosch]

Angular supports source maps now. The error is logged from the place in the template that represents the element in which the error occurred.

AFAIK, this is a limitation of karma to not be able to use source maps (see e.g. karma-runner/karma#893), and also not being able to report the place from which a console.error originated.

Could you try to do the same using the debug view in karma, i.e. opening localhost:.../debug.html and then looking at the printed stack?

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