question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Adding tags very quickly causes error ExpressionChangedAfterItHasBeenCheckedError

See original GitHub issue
zone-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:open
  • Created 3 years ago
  • Reactions:2
  • Comments:5

github_iconTop GitHub Comments

2reactions
dougsecommented, Jul 31, 2020

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). chipsjsfix

0reactions
crhistianramirezcommented, Sep 3, 2020

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?

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found