Adding tags very quickly causes error ExpressionChangedAfterItHasBeenCheckedError

[Travis Skweres]

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) {
    //
  }
}

[Doug Sellner]

+1 Having this issue as well.

[Weide Zhu]

having the same issue, any work-around?

[Travis Skweres]

I had to fork it and put a try catch in the code of the JS file, I use a local version now

[Doug Sellner]

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

[Crhistian Ramirez]

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?