importing pouchdb into angular4

1
votes

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

2
angulartypescriptangular-clipouchdbdefinitelytyped
Can you please list the compilation errors? installing it is mandatory for the db to work, but the compilation errors might get fixed. – Supamiu
@Supamiu sorry i ment installing @types/pouchdb causes compilation error , any how this shouldn't be must and found some refrences on the net showing that the @types/pouchdb is not synced with the latest version of pouchdb that could be the reason for the errors – Ali
Using CLI v1.2.0 with Angular v4.3.3 and import PouchDB from 'pouchdb'; does work for me. – PerfectPixel
@PerfectPixel OMG i can't believe it , all my issue was because of CLI verson i was using angular-cli , 1.0.0 , just now i changed to @angular/cli and it is working perfectly can you add this as answer so i can reword you the bounty amount – Ali
Always happy to help :) – PerfectPixel

2 Answers

1
votes

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.

1
votes

If you are working with Typescript(Angular or ionic) make sure you run these commands

npm install pouchdb @types/pouchdb and add "allowSyntheticDefaultImports": true in your tsconfig.json file. 

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true
  }
}

Then import in your providers with 

import PouchDB from 'pouchdb';