mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
refactor(core): Improve NG100 (#50391)
Improve the NG100 error message by formating the value using `JSON.stringify` See #34454 PR Close #50391
This commit is contained in:
parent
c464b01acd
commit
9054f95c6a
1 changed files with 21 additions and 1 deletions
|
|
@ -17,6 +17,11 @@ import {LView, TVIEW} from './interfaces/view';
|
|||
import {INTERPOLATION_DELIMITER} from './util/misc_utils';
|
||||
import {stringifyForError} from './util/stringify_utils';
|
||||
|
||||
/**
|
||||
* The max length of the string representation of a value in an error message
|
||||
*/
|
||||
const VALUE_STRING_LENGTH_LIMIT = 200;
|
||||
|
||||
/** Verifies that a given type is a Standalone Component. */
|
||||
export function assertStandaloneComponentType(type: Type<unknown>) {
|
||||
assertComponentDef(type);
|
||||
|
|
@ -60,7 +65,7 @@ export function throwErrorIfNoChangesMode(
|
|||
const field = propName ? ` for '${propName}'` : '';
|
||||
let msg =
|
||||
`ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value${
|
||||
field}: '${oldValue}'. Current value: '${currValue}'.${
|
||||
field}: '${formatValue(oldValue)}'. Current value: '${formatValue(currValue)}'.${
|
||||
componentClassName ? ` Expression location: ${componentClassName} component` : ''}`;
|
||||
if (creationMode) {
|
||||
msg +=
|
||||
|
|
@ -70,6 +75,21 @@ export function throwErrorIfNoChangesMode(
|
|||
throw new RuntimeError(RuntimeErrorCode.EXPRESSION_CHANGED_AFTER_CHECKED, msg);
|
||||
}
|
||||
|
||||
function formatValue(value: unknown): string {
|
||||
let strValue: string = String(value);
|
||||
|
||||
// JSON.stringify will throw on circular references
|
||||
try {
|
||||
if (Array.isArray(value) || strValue === '[object Object]') {
|
||||
strValue = JSON.stringify(value);
|
||||
}
|
||||
} catch (error) {
|
||||
}
|
||||
return strValue.length > VALUE_STRING_LENGTH_LIMIT ?
|
||||
(strValue.substring(0, VALUE_STRING_LENGTH_LIMIT) + '…') :
|
||||
strValue;
|
||||
}
|
||||
|
||||
function constructDetailsForInterpolation(
|
||||
lView: LView, rootIndex: number, expressionIndex: number, meta: string, changedValue: any) {
|
||||
const [propName, prefix, ...chunks] = meta.split(INTERPOLATION_DELIMITER);
|
||||
|
|
|
|||
Loading…
Reference in a new issue