refactor(core): Improve ExpressionChangedAfterItHasBeenCheckedError (#50286)

JeanMeche · AndrewKushnir · commit 7c790f70ee7d · 2023-05-16T09:24:51.000-07:00
Related to #50272 and #18970, this improves the error message of NG100 by including the class name of the component where the error was triggered. PR Close #50286
diff --git a/packages/core/src/render3/bindings.ts b/packages/core/src/render3/bindings.ts
@@ -60,7 +60,7 @@ export function bindingUpdated(lView: LView, bindingIndex: number, value: any):
         const details =
             getExpressionChangedErrorDetails(lView, bindingIndex, oldValueToCompare, value);
         throwErrorIfNoChangesMode(
-            oldValue === NO_CHANGE, details.oldValue, details.newValue, details.propName);
+            oldValue === NO_CHANGE, details.oldValue, details.newValue, details.propName, lView);
       }
       // There was a change, but the `devModeEqual` decided that the change is exempt from an error.
       // For this reason we exit as if no change. The early exit is needed to prevent the changed
diff --git a/packages/core/src/render3/errors.ts b/packages/core/src/render3/errors.ts
@@ -11,6 +11,7 @@ import {RuntimeError, RuntimeErrorCode} from '../errors';
 import {Type} from '../interface/type';
 
 import {getComponentDef} from './definition';
+import {getDeclarationComponentDef} from './instructions/element_validation';
 import {TNode} from './interfaces/node';
 import {LView, TVIEW} from './interfaces/view';
 import {INTERPOLATION_DELIMITER} from './util/misc_utils';
@@ -52,11 +53,15 @@ export function throwMultipleComponentError(
 
 /** Throws an ExpressionChangedAfterChecked error if checkNoChanges mode is on. */
 export function throwErrorIfNoChangesMode(
-    creationMode: boolean, oldValue: any, currValue: any, propName?: string): never {
+    creationMode: boolean, oldValue: any, currValue: any, propName: string|undefined,
+    lView: LView): never {
+  const hostComponentDef = getDeclarationComponentDef(lView);
+  const componentClassName = hostComponentDef?.type?.name;
   const field = propName ? ` for '${propName}'` : '';
   let msg =
       `ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value${
-          field}: '${oldValue}'. Current value: '${currValue}'.`;
+          field}: '${oldValue}'. Current value: '${currValue}'.${
+          componentClassName ? ` Expression location: ${componentClassName} component` : ''}`;
   if (creationMode) {
     msg +=
         ` It seems like the view has been created after its parent and its children have been dirty checked.` +
diff --git a/packages/core/test/acceptance/exports_spec.ts b/packages/core/test/acceptance/exports_spec.ts
@@ -55,7 +55,7 @@ describe('exports', () => {
         fixture.detectChanges();
       })
           .toThrowError(
-              /ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked/);
+              /ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.*AppComp/);
     });
 
     it('should not support reference on the same node', () => {
@@ -66,7 +66,7 @@ describe('exports', () => {
         fixture.detectChanges();
       })
           .toThrowError(
-              /ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked/);
+              /ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.*AppComp/);
     });
 
     it('should support input referenced by host binding on that directive', () => {

Original file line number	Diff line number	Diff line change
`@@ -60,7 +60,7 @@ export function bindingUpdated(lView: LView, bindingIndex: number, value: any):`
`60`	`60`	`const details =`
`61`	`61`	`getExpressionChangedErrorDetails(lView, bindingIndex, oldValueToCompare, value);`
`62`	`62`	`throwErrorIfNoChangesMode(`
`63`		`- oldValue === NO_CHANGE, details.oldValue, details.newValue, details.propName);`
	`63`	`+ oldValue === NO_CHANGE, details.oldValue, details.newValue, details.propName, lView);`
`64`	`64`	`}`
`65`	`65`	// There was a change, but the `devModeEqual` decided that the change is exempt from an error.
`66`	`66`	`// For this reason we exit as if no change. The early exit is needed to prevent the changed`