RC5 component slides.js, init swiper

Eclek · January 20, 2017, 1:21pm

Hi there,

For months now I build an ionic 2 app, I’m using the slides component from beta 9 and today I want to upgrade to RC5 (RC3 to RC5) but I’m facing an issue with the rewrite of this component.

When my page with the slides component load I have this error :
swiper.js:84 Uncaught TypeError: Cannot read property ‘classList’ of null
at initSwiper (swiper.js:84)
at Slides._initSlides (slides.js:693)

I’m not able to reproduce this error on a fresh new project and my actual one is quite too big to post it here (and I can’t publish this code) so I go further on this and try to understand why this is happening.

From what I saw in slides.js swiper is initialized two times, here :

github.com

ionic-team/ionic/blob/master/src/components/slides/slides.ts

import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, NgZone, Optional, Output, Renderer, ViewEncapsulation } from '@angular/core';

import { Config } from '../../config/config';
import { enableKeyboardControl } from './swiper/swiper-keyboard';
import { Ion } from '../ion';
import { isTrueProperty } from '../../util/util';
import { initEvents } from './swiper/swiper-events';
import { initZoom } from './swiper/swiper-zoom';
import { Platform } from '../../platform/platform';
import { SlideContainer, SlideElement, SlideTouchEvents, SlideTouches, SlideZoom } from './swiper/swiper-interfaces';
import {
  destroySwiper,
  initSwiper,
  slideNext,
  slidePrev,
  slideTo,
  startAutoplay,
  stopAutoplay,
  update,
} from './swiper/swiper';

This file has been truncated. show original

At this moment my slider was not rendered so in the “_initSlide”, “var s = this;” return undefined…

And then the “_initSlide” function is called again this time using angular lifecycle :

github.com

ionic-team/ionic/blob/master/src/components/slides/slides.ts

import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, NgZone, Optional, Output, Renderer, ViewEncapsulation } from '@angular/core';

import { Config } from '../../config/config';
import { enableKeyboardControl } from './swiper/swiper-keyboard';
import { Ion } from '../ion';
import { isTrueProperty } from '../../util/util';
import { initEvents } from './swiper/swiper-events';
import { initZoom } from './swiper/swiper-zoom';
import { Platform } from '../../platform/platform';
import { SlideContainer, SlideElement, SlideTouchEvents, SlideTouches, SlideZoom } from './swiper/swiper-interfaces';
import {
  destroySwiper,
  initSwiper,
  slideNext,
  slidePrev,
  slideTo,
  startAutoplay,
  stopAutoplay,
  update,
} from './swiper/swiper';

This file has been truncated. show original

with only the second call in afterContentInit everything is okey, “var s = this;” return an instance of the slider and all works perfectly.

I want to understand why there is two call to “_initSlide”, and why the first one occurs when nothing is rendered. Maybe it could help me to solve my problem.

Thanks for your input.

rogeraleite · April 30, 2018, 4:22pm

any solution on this?

rogeraleite · May 14, 2018, 12:59pm

Did you fix that? Same problem here.