How to import PouchDb-Find with Angular-Cli/Webpack

4
votes

I'm want to use Angular 2/Typescript with PouchDb and PouchDb-Find with a project generated with Angular-cli (which is now webpack based.) PouchDb gets wired in with a simple import statement.

import * as PouchDB from 'pouchdb'

var commonDb = new PouchDB(this.commonDbUrl) ;
console.log("commonDb",commonDb) ;

// .getIndexes() is from pouchDb.find. I don't know what the import for it is
commonDb.getIndexes().then(function (result) {
    console.log("GetIndexes.Success",result) ;
}).catch(function (err) {
    console.log("GetIndexes.Failed",err) ;
});

The new PouchDb works, the commonDb.getIndexes does not. I've tried many variations on import * as pouchfind from 'pouchdb-find' to no avail.

How do I import the PouchDb-Find module?

5
angularwebpackpouchdb
You had to do some setup to get PouchDB working, didn't you? Such as npm install ... and others. What did you do? (And did you also do it for PouchDB-Find?) - acdcjunior
I did NPM Install for both PouchDb and PouchDb find. So they are there in the node_modules. My understanding is that webpack looks at the import statements to determine what to bring into the bundle. I just don't know what the import statement should look like. - jeff
Does import * as PouchDB from 'pouchdb' work? - acdcjunior
import * as PouchDb from pouchdb` does work. I get the functionality of pouchdb. Added more info to question. - jeff
Did you install the typings for them? If so, which ones? - acdcjunior

5 Answers

6
votes

This works for me.

Install npm packages.

npm install --save pouchdb-browser
npm install --save pouchdb-find

and wrote this code

import PouchDB from 'pouchdb-browser';
import PouchDBFind from 'pouchdb-find';
PouchDB.plugin(PouchDBFind);
3
votes

In Angular 6 you should add into polyfills.ts: 

(window as any).global = window;
(window as any).process = {};
(window as any).process.nextTick = setTimeout;

Then to use PouchDB/PouchDB-find you should add the following lines to your service/controller:

import PouchDB from 'pouchdb';
import PouchFind from 'pouchdb-find';
PouchDB.plugin(PouchFind);
2
votes

This should work:

import * as PouchDB from 'pouchdb'
import * as PouchFind from 'pouchdb-find'
PouchDB.plugin(PouchFind)

For the typings, there are no typings for pouchdb-find that I'm aware of, so you'll have to use any.

0
votes

I suspect that I wasn't able to resolve this problem in the expected way because Angular-Cli is still in beta and there must be some issues.

I was able to resolve the problem by putting pouchdb.find.js and poucdb.js in the public/pouchdb folder and referencing them from index.html as in the following. I'm well aware that this is a work around and will require a work around.

<script src="pouchdb/pouchdb.js"></script>
<script src="pouchdb/pouchdb.find.js"></script>

<script>
    PouchDB('pouchdbfind') ;
</script>

I'm hopeful Angular-cli will mature quickly.

0
votes

little bit late, but I had the same trouble and won't use the script src way...

I'm using nvm with nodejs 7.x and wasn't aware that nvm use xxx will be lost on Mac after doing a reboot.

After switching to nodejs 7.1.0 all works as expected...

SO: watch your npm version

HTH

Pitt