Slides crash on segment switch with ionic upper then rc 4


#1

Hi!
After upgrade to rc 5 on segment select sometimes app crashes. Try to switch segment fast to reply the error.
With ionic 2 rc 4 app works ok .

code:

  <div padding>
    <ion-segment [(ngModel)]="pet">
      <ion-segment-button value="kittens">
        Kittens
      </ion-segment-button>
      <ion-segment-button value="puppies">
        Puppies
      </ion-segment-button>
    </ion-segment>
  </div>

  <div [ngSwitch]="pet">
    <div *ngSwitchCase="'puppies'">
      <ion-slides pager>

        <ion-slide style="background-color: green">
          <h2>Slide 1</h2>
        </ion-slide>

        <ion-slide style="background-color: blue">
          <h2>Slide 2</h2>
        </ion-slide>

        <ion-slide style="background-color: red">
          <h2>Slide 3</h2>
        </ion-slide>

      </ion-slides>
    </div>

    <div *ngSwitchCase="'kittens'">
      <ion-slides pager>

        <ion-slide style="background-color: green">
          <h2>Slide 1</h2>
        </ion-slide>

        <ion-slide style="background-color: blue">
          <h2>Slide 2</h2>
        </ion-slide>

        <ion-slide style="background-color: red">
          <h2>Slide 3</h2>
        </ion-slide>

      </ion-slides>
    </div>
  </div>

stacktrace:

TypeError: Cannot read property 'removeAttribute' of undefined
    at cleanupStyles (swiper.js:790)
    at destroySwiper (swiper.js:824)
    at Slides.ngOnDestroy (slides.js:848)
    at Wrapper_Slides.ngOnDestroy (wrapper.ngfactory.js:24)

#2

According to some answers on github and stackoverflow. The reason might be to do with Adblocker. Try and disable some of your extensions you downloaded like the Adblocker(if you have it).
Or try your app on another browser.


#3

Unfortunaly app crashes in Firefox and Chrome incognito without any extentions too.
In Firefox another stacktrace:

s.container is undefined

cleanupStyles@http://localhost:8100/build/main.js:43647:5 destroySwiper@http://localhost:8100/build/main.js:43681:5 Slides</Slides.prototype.ngOnDestroy@http://localhost:8100/build/main.js:42016:9 anonymous/Wrapper_Slides.prototype.ngOnDestroy@/IonicModule/Slides/wrapper.ngfactory.js:22:3


#4

I get the same error sometimes… Did you find any solution??


#5

I use *ngSwitchCase in my app (with much more complex code) and works fine (I also use Adblocker on Chrome).
I suspect this is caused by a local plugin, deprecated code in .ts, or so on your side.
Did you switch to Ionic 3?


#6

I tried switching to ionic3, but it gave me error wherever I used storage in my code. It says that supplied parameters do not match the parameters of the function… I guess they changed the parameters of ionic storage in ionic3… Did you get that error??


#7

No karansharma, but my code was not based upon local storage. So, I can’t be Ionic 3 the issue.