ionic v4.0.0-beta.0 Slides.update returns error

[jing-zhou]

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

wjz@bj:~/ion/ionic-conference-app$ ionic info

Ionic:

   ionic (Ionic CLI)          : 4.0.3 (/home/wjz/.nvm/versions/node/v10.7.0/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.0
   @angular-devkit/core       : 0.7.0-rc.3
   @angular-devkit/schematics : 0.7.0-rc.3
   @angular/cli               : 6.0.8
   @ionic/ng-toolkit          : 1.0.0-rc.9
   @ionic/schematics-angular  : 1.0.0-rc.9

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.1.1

System:

   Android SDK Tools : 26.1.1
   NodeJS            : v10.7.0 (/home/wjz/.nvm/versions/node/v10.7.0/bin/node)
   npm               : 6.2.0
   OS                : Linux 4.4

Environment:

   ANDROID_HOME : /home/wjz/Android/Sdk
   HTTP_PROXY   : http://127.0.0.1:42266/
   http_proxy   : http://127.0.0.1:42266/
   HTTPS_PROXY  : http://127.0.0.1:42266/
   https_proxy  : http://127.0.0.1:42266/

wjz@bj:~/ion/ionic-conference-app$

Describe the Bug
A clear and concise description of what the bug is.

Steps to Reproduce
Steps to reproduce the behavior:

1. from CLI, git clone ionic-conference-app ; go to /directoy/of/ionic-conference-app; checkout branch 'core-update'.
2. from CLI, enter 'ionic s'
3. go to browser (Chrome). the application started at 'http://localhost:8100'
4. right click mouse in the brwoser, select 'inspect' to see the error
   
   

Related Code
in 'tutorial.ts'

ionViewDidEnter() {
    this.slides.nativeElement.update();
  }

Expected Behavior
Slides.update should work without error

Additional Context
List any other information that is relevant to your issue. Stack traces, related issues, suggestions on how to fix, Stack Overflow links, forum links, screenshots, OS if applicable, etc.

[peterpeterparker]

@adamlacombe same as your previous PR regarding swipes, maybe this method is missing too?

[adamlacombe]

You have to listen for ionSlidesDidLoad before you can execute any methods on ion-slides that reference the swiper variable.

https://github.com/ionic-team/ionic/blob/master/core/src/components/slides/slides.tsx#L129 https://github.com/ionic-team/ionic/blob/master/core/src/components/slides/slides.tsx#L369

Hope that helps!

[brandyscarney]

Thank you for the issue! We're looking into this. I believe this issue has two parts to it: the update is being called prior to the slides being loaded, and the slides component is being read in as an ElementRef instead of a Slides component.

The following code is working for me in beta.2:

import { Slides } from '@ionic/angular';

@Component({
  ...
})
export class TutorialPage {

  @ViewChild('slides', { read: Slides }) slides: Slides;

  ionViewDidEnter() {
    this.slides.update();
  }
}

We're going to see if we can find a way to get this working without passing to the read property.

[peterpeterparker]

@brandyscarney is the following the official way to access the slide in the code?

 @ViewChild('slides', { read: Slides }) slides: Slides;

in v3 I did

 @ViewChild('mySlider') slides: Slides;
 
 this.slides.getActiveIndex();

which didn't work in v4, therefore I end up doing

 @ViewChild('mySlider') slides: ElementRef;
 
 this.slides.nativeElement.getActiveIndex();

which works...but maybe your solution gives better performance and typescript support?

[brandyscarney]

@peterpeterparker Ideally we want the following to work (like it did in v3):

 @ViewChild('mySlider') slides: Slides;
 
 this.slides.getActiveIndex();

However, right now since ViewChild is reading it in as an ElementRef you need to change it to the following, which should work:

 @ViewChild('mySlider', { read: Slides }) slides: Slides;
 
 this.slides.getActiveIndex();

We're looking into how we can remove the need for { read: Slides }.

[peterpeterparker]

@brandyscarney thx for your answer

I've a try (switching from ElementRef to { read: Slides }) and I've to say to result weren't really good in my case. I don't understand exactly why but doing so, the page where I use activeIndex, it froze the browser :( Going back to ElementRef and everything went back to fine

[manucorporat]

Thanks for reporting this issue! it's already fixed in master of stencil:
Next version of IOnic will have this fixed!

No need to do {read: Slides}!