ionic-framework: Swiper breaking if accessed quickly enough and multiple times

Ionic version: [x ] 2.x

I’m submitting a … [x ] bug report

Current behavior: If we navigate quickly between pages that have a swiper in some cases the ngOnDestroy of the swiper breaks

Expected behavior: The swiper need to initialize every time it’s called

Steps to reproduce: Create 2 pages in a tabbed interface and add to the first a swiper. Try to navigate between those pages a lot of times stressing as much the swiper component

Related code: When trying to destroy the component here: https://github.com/driftyco/ionic/blob/master/src/components/slides/slides.ts#L1092 this is not defined. This might be occuring cause of this: https://github.com/driftyco/ionic/blob/master/src/components/slides/slides.ts#L939

  ngAfterContentInit() {
    this._plt.timeout(() => {
      this._initSlides();
    }, 300);
  }

timing out or this: https://github.com/driftyco/ionic/blob/master/src/components/slides/slides.ts#L903


    if (viewCtrl) {
      var subscription = viewCtrl.readReady.subscribe(() => {
        subscription.unsubscribe();
        this._initSlides();
      });
    }

not managing to resolve the subscription before the destroy of the component.

As all above are asynchronous the ngOnDestroy might be called before the initialization of the component and as a consequence breaking it.

Potential fix would be to add a check for the this if it’s present before trying to access it.

ngOnDestroy() {
    if(!this) {
      return;
    }
    this._init = false;

    this._unregs.forEach(unReg => {
      unReg();
    });
    this._unregs.length = 0;

    destroySwiper(this);

    this.enableKeyboardControl(false);
  }

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 8
Comments: 17 (4 by maintainers)

Most upvoted comments

This issue still exists

+18

hamzahamidi on May 24, 2017

Hello from 2018. This issue is still exist and setTimeout is bad solution. For devices with powerful hardware 50ms is quite enough, but for old devices sometimes even 500ms is not enough and error appears.

This is not cordova or some third party module issue, this is bug in your framework core. Please fix it or add status won't fix and add in docs mark not production ready to slides feature.

Update: dirty solution that work in all cases is to wrap logic in try/catch

    private _recursiveSlideTo(slideIndex: number): Promise<void> {
        return new Promise((resolve: Function, reject: Function): void => {
            let tryCount: number = 0;
            this._slideTo(slideIndex, tryCount, resolve, reject);
        });
    }

    private _slideTo(slideIndex: number, tryCount: number, resolve: Function, reject: Function): void {
        try {
            this._slides.slideTo(slideIndex, 0);
            resolve();
        } catch (error) {
            if (tryCount < 100) {
                tryCount++;
                setTimeout(() => this._slideTo(slideIndex, tryCount, resolve, reject), 50);
            } else {
                reject(error);
            }
        }
    }

and call this._recursiveSlideTo(1) that return promise on finish and can be chain with other logic.

EugeneSnihovsky on Feb 20, 2018

Why is closed this? I’m still getting error calling SlideTo:

ionViewDidLoad() {

    this.localSettings.load().then(() => this.localSettings.getValue(this.localSettings.SETTINGS_INTRO_SEEN).then(res => {

      if (res) {
        this.slides.slideTo(5);        
      }
    })); 
  }

quedicesebas on Jul 17, 2017

This issue still exists global packages:

@ionic/cli-utils : 1.4.0
Cordova CLI      : 7.0.1 
Ionic CLI        : 3.4.0

local packages:

@ionic/app-scripts              : 1.3.12
@ionic/cli-plugin-cordova       : 1.4.0
@ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms               : ios 4.4.0
Ionic Framework                 : ionic-angular 3.5.0

System:

Node       : v6.11.0
OS         : macOS Sierra
Xcode      : Xcode 8.3 Build version 8E162 
ios-deploy : 1.9.1 
ios-sim    : 6.0.0 
npm        : 3.10.10

kumaran-is on Jul 2, 2017

Is this issue fixed? Is there any workaround for now to solve this?

deepak07 on Apr 25, 2017

why its closed??? As everyone says. This problem is still existing.

ck88ger on Jan 14, 2018