Slides API Runtime Error


#1

Hi Everyone!

I’m a new user here and very new to Angular2 so please bear with me.

I’m having a lot of trouble with implementation of the Slides API in a test mobile app. As soon as I place the placeholder HTML code in one of my pages, I receive a Runtime Error in Ionic Labs. I’m using the following code (taken from Ionic Developers API):

<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> 

The Runtime Error I receive is: ele.hasAttribute is not a function.
The Stack shows the following:

isActivatable@http://localhost:8100/build/main.js:62537:13 getActivatableTarget@http://localhost:8100/build/main.js:62523:13 TapClick</TapClick.prototype.click@http://localhost:8100/build/main.js:62435:34

I’m not sure if this is an issue uniquely related to rc4 (which I am using) but I’m new to Ionic and so have no frame of reference. Any help would be much appreciated.


#2

Hmm, I just copied your code in a sample project and it worked fine.

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>
<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>

#3

Thanks for checking for me Mike.

Yeah it’s odd because the snippet is from the official API documentation so I doubt there’s anything wrong with it. For the life of me, I can’t track down the issue however.

As soon as I delete the code from my page and serve through my browser the error goes away. There aren’t even any dependencies since it’s an ionic API!

What do you think could be the problem?

EDIT: So after a little more research (based on this Github post) I’m beginning to understand this a little better. The (click) event handler is attached to the ‘p’ variable in my nav’s ngFor when generating my menu items via page array iteration. It seems that the ‘p’ variable doesn’t have a hasAttribute function.

It seems to be an rc4 bug as another user had it ontap for a google map he was building into an app.

I’m not sure how to correct it for now but at least this means it wasn’t the Slides Component.


#4

I am getting the same error runtime when going through the 3 slide. Did you figure this out?


#5

Hi @theWhisper. I did manage to get rid of the error popping up. It seems this was occurring because of the import statement for the Slides component I was placing in my page.ts file. This fix sacrifices functionality though as the mySlideOptions example in the documentation will no longer be applied (I was only running a test so this wasn’t so important for me).

So if you used:

import { Component } from '@angular/core';
import { Slides } from 'ionic-angular';

@Component({
  templateUrl: 'my-page.html'
})
class MyPage {
  mySlideOptions: any;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    mySlideOptions = {
      initialSlide: 1,
      loop: true
    };
  }
} 

in your page.ts, then you’d need to remove the import statement to have the error go away. The default slide functionality still remains if you have defined the HTML in your page.html file.

I’m not sure what is causing the error exactly. I checked and all of the files seem to be installed correctly in node packages…

EDIT: I have updated my framework to 2.2.11 (still running rc4) and this problem is still not fixed. Also some of Slides options still do not work (specifically I have been trying paginationType: ‘fraction’.


#6

I’m having this exact same issue. Anybody managed to resolve it?


#7

It might have been solved in the full v2 release but I haven’t had a chance to test yet. Will let you know if I find anything.