Search code examples
angulartypescriptangular-clipouchdbdefinitelytyped

importing pouchdb into angular4

The Issue:

Not able to import pouchdb in angular4 running ng serve in angular cli (that should compile the typescript and make the page run) gives the error

when using pouchddb

Cannot find module 'pouchdb'. webpack: Failed to compile.

and when using pouchdb-browswer

Cannot find module 'pouchdb-browser'. webpack: Failed to compile.

Reproduce

1- Install angular cli

npm install angluar-cli -g

2- Create angular project

ng new project

3- In the project install pouch either

npm install pouchdb --save

or

npm install pouchdb-browser --save

In the code import pouch db

tried each of these but all gave the same error

import PouchDB from 'pouchdb';
import PouchDB from 'pouchdb-browser';
import * as PouchDB from 'pouchdb-browser';
import * as PouchDB from 'pouchdb';

Note

Installing @types/pouchdb didn't help, infact I get even more compilation errors some of the errors are

ERROR in C:/Users/aallawati/Development/pro1/node_modules/@types/pouchdb-core/index.d.ts (765,30): Cannot find namespace 'Core'.

ERROR in C:/Users/aallawati/Development/pro1/node_modules/@types/pouchdb-core/index.d.ts (766,37): Cannot find namespace 'Core'.

ERROR in C:/Users/aallawati/Development/pro1/node_modules/@types/pouchdb-core/index.d.ts (767,40): Cannot find namespace 'Core'.

ERROR in C:/Users/aallawati/Development/pro1/node_modules/@types/pouchdb-core/index.d.ts (768,33): Cannot find namespace 'Core'.

ERROR in C:/Users/aallawati/Development/pro1/node_modules/@types/pouchdb-core/index.d.ts (771,30): Cannot find namespace 'Core'.

ERROR in C:/Users/aallawati/Development/pro1/node_modules/@types/pouchdb-core/index.d.ts (772,37): Cannot find namespace 'Core'.

ERROR in C:/Users/aallawati/Development/pro1/node_modules/@types/pouchdb-core/index.d.ts (773,41): Cannot find namespace 'Core'.

ERROR in C:/Users/aallawati/Development/pro1/node_modules/@types/pouchdb-core/index.d.ts (776,30): Cannot find namespace 'Core'.

ERROR in C:/Users/aallawati/Development/pro1/node_modules/@types/pouchdb-core/index.d.ts (777,37): Cannot find namespace 'Core'.

ERROR in C:/Users/aallawati/Development/pro1/node_modules/@types/pouchdb-core/index.d.ts (778,33): Cannot find namespace 'Core'.



ERROR in C:/Users/aallawati/Development/pro1/node_modules/@types/pouchdb-replication/index.d.ts (166,45): '>' expected.

ERROR in C:/Users/aallawati/Development/pro1/node_modules/@types/pouchdb-replication/index.d.ts (166,47): Expression expected.

ERROR in C:/Users/aallawati/Development/pro1/node_modules/@types/pouchdb-replication/index.d.ts (186,13): ',' expected.

ERROR in C:/Users/aallawati/Development/pro1/node_modules/@types/pouchdb-replication/index.d.ts (191,10): ',' expected.

update

i tried to import PouchDB from 'pouchdb'; in a normal typescript file (non angular)

and compiled it with tsc and it worked fine

i guess the issue is because of angular-cli or webpack not sure

Solution

  • Using CLI v1.2.0 with Angular v4.3.3 and import PouchDB from 'pouchdb'; does work for me.

    Keep in mind that the package was renamed at a certain point and only the newer versions support more advanced webpack configurations.