Adding tags very quickly causes error ExpressionChangedAfterItHasBeenCheckedError
See original GitHub issuezone-evergreen.js:171 Uncaught Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'ng2-tag-input--invalid': ''. Current value: 'false'.
at throwErrorIfNoChangesMode (core.js:8147)
at bindingUpdated (core.js:20136)
at checkStylingProperty (core.js:23474)
at ɵɵclassProp (core.js:23374)
at TagInputComponent_Template (ngx-chips.js:2394)
at executeTemplate (core.js:12156)
at refreshView (core.js:11995)
at refreshComponent (core.js:13445)
at refreshChildComponents (core.js:11716)
at refreshView (core.js:12051)
I fixed it by going into the node_modules ngx-chips.js, and adding a try / catch to line 2393:
if (rf & 2) {
try {
ɵngcc0.ɵɵclassProp("ng2-tag-input--dropping", ctx.isDropping())("ng2-tag-input--disabled", ctx.disable)("ng2-tag-input--loading", ctx.isLoading)("ng2-tag-input--invalid", ctx.hasErrors())("ng2-tag-input--focused", ctx.isInputFocused());
ɵngcc0.ɵɵproperty("ngClass", ctx.theme);
ɵngcc0.ɵɵattribute("tabindex", 0 - 1);
ɵngcc0.ɵɵadvance(2);
ɵngcc0.ɵɵproperty("ngForOf", ctx.items)("ngForTrackBy", ctx.trackBy);
ɵngcc0.ɵɵadvance(1);
ɵngcc0.ɵɵproperty("inputText", ctx.inputText)("disabled", ctx.disable)("validators", ctx.validators)("asyncValidators", ctx.asyncValidators)("hidden", ctx.maxItemsReached)("placeholder", ctx.items.length ? ctx.placeholder : ctx.secondaryPlaceholder)("inputClass", ctx.inputClass)("inputId", ctx.inputId)("tabindex", ctx.tabindex);
ɵngcc0.ɵɵadvance(1);
ɵngcc0.ɵɵproperty("ngIf", ɵngcc0.ɵɵpipeBind1(5, 25, ctx.isProgressBarVisible$));
ɵngcc0.ɵɵadvance(2);
ɵngcc0.ɵɵproperty("ngIf", ctx.hasErrors());
} catch (err) {
//
}
}
Issue Analytics
- State:
- Created 3 years ago
- Reactions:2
- Comments:5
Top Results From Across the Web
Developers - Adding tags very quickly causes error ... - Bountysource
zone-evergreen.js:171 Uncaught Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.
Read more >ExpressionChangedAfterItHasBe...
This error indicates a real problem in your application, therefore it makes sense to throw an exception. In devMode change detection adds an ......
Read more >Everything you need to know about the ... - HackerNoon
This article explains the underlying causes of the error and the mechanism ... So here is what happens when Angular runs change detection....
Read more >Angular Debugging "Expression has changed": Explanation ...
We will first start by quickly debugging the error (a video is ... The cause is adding code to the wrong lifecycle hook,...
Read more >Catch Angular template errors like a pro or how I create ...
I enjoy answering questions with angular tag and I always try to create some ... to create a tool that will help me...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
The actual/base cause for this is that TagInput.Form.hasErrors returns an empty string rather than a false boolean which triggers the change/detection exception. The image is taken from compiled js but should be put into the ts/PR (i didn’t have the guts/time to do a PR).
Seems like that PR has been sitting there for a while now, not sure if this is being maintained anymore. Anybody have a workaround besides forking?