CODEWITHSUNDEEP
angularionic2pouchdbcloudant
Tuba Mohsin
Tuba Mohsin

Reputation: 81

Pouchdb in Ionic 2 RC.0 is not working

I am using pouchdb in Ionic 2 Rc.0 to sync data from cloudantdb.

I install pouch db using: npm install pouchdb --save

I install SQLITE Plugin: onic plugin add https://github.com/litehelpers/Cordova-sqlite-storage

I install typings for pouch db: typings install --global --save dt~pouchdb dt~pouchdb-adapter-websql dt~pouchdb-browser dt~pouchdb-core dt~pouchdb-http dt~pouchdb-mapreduce dt~pouchdb-node dt~pouchdb-replication

I also run the following command to generate a Data service:ionic g provider Data

My data.ts file is

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import * as PouchDB from 'pouchdb';
@Injectable()
export class Data {
data: any;
db: any;
remote: any;
username: any;
password: any;

constructor(public http: Http) {
console.log('Hello Data Provider');
this.db = new PouchDB('swqms');
this.username = 'xxx';
this.password = 'xxx';
this.remote = 'https://xxx-bluemix.cloudant.com/xxx';

let options = {
  live: true,
  retry: true,
  continuous: true,
  auth: {
    username: this.username,
    password: this.password
   }
  };

this.db.sync(this.remote, options);

}

addDocument(doc){
this.db.put(doc);
} 

getDocuments(){

console.log("Yes");

return new Promise(resolve => {

  this.db.allDocs({

    include_docs: true

   }).then((result) => {
     console.log("resutl = " + JSON.stringify(result))
     this.data = [];

     let docs = result.rows.map((row) => {
      this.data.push(row.doc);
      resolve(this.data);
    });

     this.db.changes({live: true, since: 'now', include_docs:                   true}).on('change', (change) => {
      this.handleChange(change);
     });

     }).catch((error) => {

     console.log(error);

     }); 

     });


     }

    handleChange(change){

    let changedDoc = null;
    let changedIndex = null;

     this.data.forEach((doc, index) => {

     if(doc._id === change.id){
    changedDoc = doc;
    changedIndex = index;
     }

       });

//A document was deleted
if(change.deleted){
  this.data.splice(changedIndex, 1);
} 
else {

  //A document was updated
  if(changedDoc){
    this.data[changedIndex] = change.doc;
  } 
  //A document was added
  else {
    this.data.push(change.doc);        
  }

  }

  }  

  }

My app.module.ts file is

import { NgModule } from '@angular/core'; 
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component'; 
import {Storage} from '@ionic/storage';
import {Data} from '../providers/data';

@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
providers: [Storage, Data]
})
export class AppModule {}

My app.component.ts file is:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from 'ionic-native';
import {Data} from '../providers/data';

@Component({
template: `<ion-nav [root]="rootPage"></ion-nav>`,

providers: [Data]
})
export class MyApp {
rootPage = TabsPage;

constructor(platform: Platform) {
platform.ready().then(() => {
StatusBar.styleDefault();
});
}
}

There is some problem in data.ts file. If I comment this line this.db = new PouchDB('sqwms'); default app is showing on the screen (data is not syncing obv) but when I uncomment this line nothing is showing on the screen.

Someone please help me out. Thanks.

Upvotes: 1

Views: 335

Answers (2)

Tuba Mohsin
Tuba Mohsin

Reputation: 81

the error was:

UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: 'extend' is not exported by node_modules/js-extend/extend.js (imported by node_modules/pouchdb/lib/index-browser.es.js)

The new release of pouchdb 6.0.7 has resolved this error. I updated my npm module and now it is working perfectly.

Upvotes: 0

Onno
Onno

Reputation: 897

There have to be some errors in the console (of the browser, if you use ionic serve) and in your terminal during the build process, which will give you more information about the problem.

Most likely, there is a problem with Rollup, which bundles the code since RC0. See App Build Scripts in the official Ionic docs, where in section "Third Party Modules Export Errors" a custom rollup config file is explained. They use PouchDB as an example.

Upvotes: 0

Related Questions