ExpresionChangedAfterItHasBeenCheckedError

[jph2658]

Has anyone else seen this?

Happy to provide more information if needed.

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'.
at viewDebugError (core.es5.js:8426)
at expressionChangedAfterItHasBeenCheckedError (core.es5.js:8404)
at checkBindingNoChanges (core.es5.js:8568)
at checkNoChangesNodeInline (core.es5.js:12440)
at checkNoChangesNode (core.es5.js:12414)
at debugCheckNoChangesNode (core.es5.js:13191)
at debugCheckRenderNodeFn (core.es5.js:13131)
at Object.eval [as updateRenderer] (Ng2Carouselamos.html:44)
at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13113)
at checkNoChangesView (core.es5.js:12236)

<div class="sr-amazon-items" ng2-carouselamos [width]="1024" [items]="amazonItems" [$item]="itemTemplate" [$prev]="prevTemplate"
       [$next]="nextTemplate">
  </div>
  <ng-template #prevTemplate>
    <button md-icon-button>
      <i class="mdi mdi-chevron-left mdi-24px"></i>
    </button>
  </ng-template>
  <ng-template let-item let-i="index" #itemTemplate>
    <div class="sr-amazon-item">
      <md-card>
        <md-card-header>
          <md-card-title>{{item.title}}</md-card-title>
        </md-card-header>
        <img mat-card-image class="sr-amazon-item-image" src="{{item.medium_image}}" alt="{{item.title}}" />
        <md-card-actions>
          <button md-raised-button>Add</button>
        </md-card-actions>
      </md-card>
    </div>
  </ng-template>
  <ng-template #nextTemplate>
    <button md-icon-button>
      <i class="mdi mdi-chevron-right mdi-24px"></i>
    </button>
  </ng-template>

[jph2658]

More info...

It seems to only happen when I hit the next button and reach the last item in the carousel.

Then... I can continue to scroll to the right indefinitely without it looping around or showing additional items, which may be a side affect.

[joselcvarela]

Hey @jph2658
The error message you provided tells that the error is in "Ng2Carouselamos.html:44". So I checked file Ng2Carouselamos.html line 44 and it's related with template binding. Once your template don't change along time I can't understand why this is happening.
And then I checked angular repo and few people are reporting the same problem. So I think maybe it's angular related. But once I have free time I will try to test your code.

[snimmaga9]

Hi, I get the same error. Any fix for this problem? As soon as i reach the end of the list i get the above error and when clicking the items in the carousel is only scrolling to the left instead of doing their own click actions. please advice.

[snimmaga9]

Ng2Carouselamos.html:44 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'.
at $t (vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:101)
at zt (vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:101)
at ne (vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:101)
at vr (vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:150)
at dr (vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:150)
at Zr (vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:150)
at n (vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:150)
at Object.eval [as updateRenderer] (Ng2Carouselamos.html:44)
at Object.$r [as updateRenderer] (vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:150)
at ur (vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:150)
View_Ng2Carouselamos_6 @ Ng2Carouselamos.html:44
t.logError @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:234
t.handleError @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:192
(anonymous) @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:206
t.invoke @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:975
r.run @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:975
t.runOutsideAngular @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:206
e.tick @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:206
(anonymous) @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:206
t.invoke @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:975
onInvoke @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:59
t.invoke @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:975
r.run @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:975
t.run @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:206
next @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:206
e.object.o @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:206
e.__tryOrUnsub @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:24
e.next @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:24
e._next @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:24
e.next @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:24
e.next @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:312
e.emit @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:206
ot @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:59
at @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:59
onInvokeTask @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:59
t.invokeTask @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:975
r.runTask @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:975
invoke @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:975
Ng2Carouselamos.html:44 ERROR CONTEXT t {view: {…}, nodeIndex: 0, nodeDef: {…}, elDef: {…}, elView: {…}}

[volpejoaquin]

Any update of this ? I also need this fix.

[aniketavhad13]

When i open slider in browser, I got the same issue.
Screenshot is attached

[pcriado]

It seems this happens because a ViewChild is being accessed from ngAfterViewInit() with default change detection. The error went away when I switched to OnPush strategy for the component.

[PragadeeshwaranPasupathi]

Any one solved this issue ?

[aminesafi8]

This issue can be solved simply by injecting into the constructor private cdRef: ChangeDetectorRef
And in the ngAfterViewInit cycle hook just call the method detectChanges()
ngAfterViewInit(): void {
this.cdRef.detectChanges();
}

[Trueander]

This issue can be solved simply by injecting into the constructor private cdRef: ChangeDetectorRef
And in the ngAfterViewInit cycle hook just call the method detectChanges()
ngAfterViewInit(): void {
this.cdRef.detectChanges();
}

Thanks a lot, I did it and it worked.