Arnauld
Arnauld

Reputation: 138

epubJS Ionic 3 integration

folks.

I am trying to open ePub files in my Ionic 3 test app with no success.

I have epubjs installed thru npm. Package.json as:

{
  "name": "app_name",
  "author": "Author",
  "homepage": "http://example.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/animations": "4.1.3",
    "@angular/common": "4.1.3",
    "@angular/compiler": "4.1.3",
    "@angular/compiler-cli": "4.1.3",
    "@angular/core": "4.1.3",
    "@angular/forms": "4.1.3",
    "@angular/http": "4.1.3",
    "@angular/platform-browser": "4.1.3",
    "@angular/platform-browser-dynamic": "4.1.3",
    "@angular/platform-server": "4.1.3",
    "@ionic-native/core": "3.12.1",
    "@ionic-native/device": "^3.12.1",
    "@ionic-native/network": "^3.12.1",
    "@ionic-native/splash-screen": "3.12.1",
    "@ionic-native/status-bar": "3.12.1",
    "@ionic-native/transfer": "^3.12.1",
    "@ionic/storage": "2.0.1",
    "epubjs": "^0.2.20",
    "ionic-angular": "3.4.0",
    "ionicons": "3.0.0",
    "ng2-pdf-viewer": "^1.1.0",
    "rxjs": "5.4.0",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.12"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.3.7",
    "@ionic/cli-plugin-ionic-angular": "1.3.1",
    "typescript": "2.3.4"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [],
  "description": "readerApp"
}

Importing epubjs (import {epubjs} from 'epubjs';) in the Reader page (pages/reader/reader.ts) seems ok. But when I try to create an ePub book (let book = epubjs.ePub(url) ), I get the following error message on app run:

Uncaught Error: Module parse failed: /home//dev_mobile//node_modules/@ionic/app-scripts/dist/webpack/transpile-loader.js!/home//dev_mobile//node_modules/epubjs/server.js Unexpected character '#' (1:0) You may need an appropriate loader to handle this file type. | #!/usr/bin/env node | var connect = require('connect'), | colors = require('colors'), . . .

Googled for the last 3 days w/o any clues. Anyone got this too?

My guess is that epubjs integration is not quite mature but I've got little knowledge on how to fix it =|

Upvotes: 0

Views: 1119

Answers (1)

Kamal Rahmati
Kamal Rahmati

Reputation: 31

You need to copy epubjs folder into src/assets and then reference necessary files in your src/index.html

<script src="assets/epubjs/build/epub.min.js"></script>
<script src="assets/epubjs/build/libs/zip.min.js"></script>

and then in you page:

declare var ePub: any;
let book = ePub("assets/books/moby-dick/");

https://github.com/janpio/ionic-epubjs

Upvotes: 2

Related Questions