Syncing Data with PouchDB and Cloudant in Ionic 2


I just released a new tutorial I thought some people here might be interested in (especially the Ionic 2 people). It covers how to set up PouchDB in an Ionic 2 application and how to get the data syncing to a remote backend with Cloudant:


Hey there,

nice tutorial but i have a littel suggestion --> you can simplify your dependency injection in angular 2:

constructor(@Inject(Data) dataService) {
    this.dataService = dataService;

to something like this:

constructor(private dataService: Data) {

I wrote some tutorials for the german angularjs community this is a little pizza service app:

Maybe this helps



That’s how I have been injecting up until recently, but in the latest Ionic 2 beta the default template + generate commands use the @Inject syntax, whereas before they used the method you posted above - any idea on why the change was made to the CLI? I pretty much figured I’d just follow suit.


Ah okay. I am not so deep in ionic 2, yet… I am waiting until angular 2 is in the stage to use without bugs and laggs^^.

I thought the simplest way is to use the approach i posted, but it does the same.

There was something like an evolution of dependency injection from a really low-level usage to the way you/i did it.

The “Inject()” writing is maybe a little bit more unique, because you get the information --> okay this is a dependency injection instead of a custom constructor parameter.


Thank you very much for this very useful tutorial.


Yeah this was my thinking as well, although something like:

constructor(dataService: data)

is cleaner and nicer to type, at least the @Inject syntax makes it clear that something is being “injected” which I think could be helpful for beginners. Still not sure on the dev teams reasoning for the change in preference though so would be interesting to hear.



I was wondering if anyone could retry this tutorial in the current Ionic v2 build?

I get Error during evaluation of “click” in the Chrome console.

In the CLI, I get “Unexpected token (9:16) while parsing file: /…/home.js” which equates to the line being discussed above:

constructor(@Inject(Data) dataService)

I’ve also tried constructor(private dataService: Data)

I’d really like to incorporate pouchdb (or any NoSQL db), but I’ve been struggling to do so.

Any help would be greatly appreciated!



If you’re using ES6 then change to:

static get parameters(){
    return [[Data]];



Thanks, Josh!!

By the way, please keep your articles coming! I’ve read all your Ionic 2 articles; I got your “shhh” code as well. Your style is clear, and you’ve got the best articles on the topic.



Hey, Did anyone do the tutorial in Typescript ?? I’m having this error In the chrome browser
data.ts:7Uncaught TypeError: this.require is not a function

I’m pretty sure it has to do with this.
this.PouchDB = this.require('pouchdb');


Hi, I try to get Josh’s example app cloudant working, but I continue to run in a number of problems (file:data.js).

  • import {Storage, SqlStorage} from ionic-angular.
    Error message: index has no exported member Storage, SqlStorage. I checked the file (in node-modules) but could not find storage-related exports

  • var PouchDB = require(‘pouchdb’); [ts]: cannot find “require”

Any suggestions/code that fixes the problem? The PouchDB-CouchDB function is an essential part of the app, and after a few days (also tried pouchdb-couchdb cloudo example, and could not get that going either)




That tutorial needs to be updated, so there’s probably a few things wrong with it, but to address the specific points you raised:

  • You should now use import { Storage } from '@ionic/storage' and the way you have to use it is a bit different now, so you may want to look that up

  • Use import PouchDB from 'pouchdb'; instead


@apheiner I agree with joshmorony , This question also came up on stack overflow which I might have something to do with some of your issues