Angular 2 configuration

[timofeysie]

I would like to use this plugin with an Angular 2 app (via Ionic 2), which uses TypeScript. I'm not sure how to configure the plugin. This does not work:

import * as PouchDB from 'pouchdb';
constructor() {
    this.db = new PouchDB('name');
    PouchDB.plugin('pouchdb-upsert');
}

The error is:

caused by: Invalid plugin: object passed in is empty or not an object

Any ideas?

[nolanlawson]

PouchDB.plugin(require('pouchdb-upsert')) should do it.

[timofeysie]

@nolanlawson , since this isn't an import, I can't just replace 'require' with an import statement. As it is:

this.db.plugin(require('pouchdb-upsert'));

There is a build error:

Cannot find name 'require'.

If I try to import the lib as a variable to then pass to that function, like this:

import * as pouchdbUpsert from 'pouchdb-upsert';
    ...
    this.db.plugin(pouchdbUpsert);

Then I will still get a runtime error:

caused by: this.db.plugin is not a function. (In 'this.db.plugin(__WEBPACK_IMPORTED_MODULE_5_pouchdb_upsert__)', 'this.db.plugin' is undefined)

By the way, this is an Ionic 2 RC2 project which uses Webpack and Pouchdb is working fine on its own...

[nolanlawson]

If you're not using require() then yeah you have to use import. Now it seems like the problem is that db.plugin is not a function, but PouchDB.plugin is. You apply plugins to the PouchDB object, not the individual dbs. Does that help?

[Ismaestro]

@nolanlawson I solved like this:

import * as PouchDB from 'pouchdb'; import * as pouchdbUpsert from 'pouchdb-upsert';

constructor() { PouchDB.plugin(pouchdbUpsert); }