Protractor times out when Carousel is present

[giggio]

Bug description:

Protractor times out when Carousel is present.
You will get this message:

Timed out waiting for asynchronous Angular tasks to finish after 11 seconds.

Link to minimally-working plunker that reproduces the issue:

You can use any of your carousel plunkers. Simply run protractor against it, and it will timeout.

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 2.4.3

ng-bootstrap: 1.0.0-alpha16

Bootstrap: 4.0.0-alpha.5

Protractor: 5.0.0

[giggio]

It seems earlier versions had similar problems with Angular 1. See angular-ui/bootstrap#2454

[wesleycho]

My gut feeling here is that this is a Protractor issue, not an ng-bootstrap issue.

[wesleycho]

I took a look at this, and this appears to be inconsistent. Here is an app generated by Angular CLI that illustrates this: https://github.com/wesleycho/carousel-protractor .

What seems to happen is that actions are blocked until the page navigation is complete, but in the meantime the carousel is already running. This smells like a Protractor issue to me.

[ivarvolt]

Protractor hangs when there are intervals used. For Protractor to work interval has to be run outside of Angular scope. This can be achieved using ngZone.

So I had the same problem. Right now my workaround is:

set carouselConfig.interval = 0;
(Seems if I dont define it, some default is used? if its 0 then interval wont be started.)

To have the carousel interval functionality in component:

  @ViewChild(NgbCarousel)
  private carousel: NgbCarousel;

In ngOnInit I have code:

    this.ngZone.runOutsideAngular(()=>{
      setInterval(() => {
        this.ngZone.run( () => {
          this.carousel.next();
        });
      },3000);
    });