refactor(core): Improve ExpressionChangedAfterItHasBeenCheckedError

Related to angular#50272 and angular#18970, this improves the error message of NG100 by including the class name of the component where the error was triggered.
JeanMeche · May 15, 2023 · 8ae3fed · 8ae3fed
1 parent fab7f39
commit 8ae3fed
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
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', () => {