Upgrading to V0.3 in Ionic

[ibby89]

I've been using epub.js in my Ionic app with V0.2 and it has been running quite well. I've been trying to update to V0.3.63 and followed as many of the steps in the readme as possible. I started a new application in order to do so.

I have set my app up as follows: home.ts

import { Component } from '@angular/core';
import { NavController, Platform, NavParams } from 'ionic-angular';

declare var ePub: any;
declare var rendition: any;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  book: any;
  rendition: any;
  displayed: any;

  constructor(public navCtrl: NavController, public platform: Platform, public navParams: NavParams) {
    let book = "assets/books/moby-dick.epub";

    this.platform.ready().then(() => {
      // load book
      this.book = ePub(book);
    });
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad BookPage');
    this.platform.ready().then(() => {
      // render book
      this.rendition = this.book.renderTo("book", { method: "default", width: "100%", height: "100%" });
      this.displayed = rendition.display();
    });  
  }
}

home.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <div id="book"></div>
</ion-content>

I receive an error that I have an uncaught promise because 'rendition' is not defined. So I shortened the code as had been done in my current app so the book was rendered like so:

ionViewDidLoad() {
    console.log('ionViewDidLoad BookPage');
    this.platform.ready().then(() => {
      // render book
      this.book.renderTo("book", { method: "default", width: "100%", height: "100%" });
    });  
  }

I'm not getting any errors like this, but the book is not being rendered onto the page (I have checked and dist/epub.min.js is being loaded correctly).

[teja22060]

any progress on this issue, i am also facing same issue in anguar 7

[Domingos-Masta]

Change this:

` // bad way import { Component } from '@angular/core'; import { NavController, Platform, NavParams } from 'ionic-angular';

declare var ePub: any; declare var rendition: any;

@Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage {

book: any; rendition: any; displayed: any;

constructor(public navCtrl: NavController, public platform: Platform, public navParams: NavParams) { let book = "assets/books/moby-dick.epub";

this.platform.ready().then(() => {
  // load book
  this.book = ePub(book);
});

}

ionViewDidLoad() { console.log('ionViewDidLoad BookPage'); this.platform.ready().then(() => { // render book this.rendition = this.book.renderTo("book", { method: "default", width: "100%", height: "100%" }); this.displayed = rendition.display(); });
} } `

To this :

` //good Way import { Component } from '@angular/core'; import { NavController, Platform, NavParams } from 'ionic-angular';

declare var ePub: any; //Remove this from here //declare var rendition: any;

@Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage {

// And put here rendition: any; book: any; rendition: any; displayed: any;

constructor(public navCtrl: NavController, public platform: Platform, public navParams: NavParams) { let book = "assets/books/moby-dick.epub";

this.platform.ready().then(() => {
  // load book
  this.book = ePub(book);
});

}

ionViewDidLoad() { console.log('ionViewDidLoad BookPage'); this.platform.ready().then(() => { // render book this.rendition = this.book.renderTo("book", { method: "default", width: "100%", height: "100%" }); this.displayed = rendition.display(); });
} } `