Using PouchDB in an Angular2 Cli Application with SystemJS and TypeScript

Question

I've searched through dozens of questions and answers on GitHub and Stack Overflow for the past two days. I haven't found a solution yet. Hopefully someone here can help me!

I have gotten PouchDB working in development mode, using ng serve and ng build , however, when I try to build for production, using ng build --prod , it encounters an error:

...

Error: Unable to calculate canonical name to bundle file:///home/josiah/Projects/www/projectname/vendor/pouchdb/dist/pouchdb.js. Ensure that this module sits within the baseURL or a wildcard path config.

...

My current Angular2 Cli generated system-config.ts contains:

const map: any = {
  'pouchdb': './vendor/pouchdb/dist/',
};

and

const packages: any = {
   "pouchdb": {
      main: "pouchdb",
      defaultExtension: "js"
   }
};

In angular-cli-build.json I have added 'pouchdb/dist/*.+(js|js.map)', .

I am using PouchDB in my project with this import: import * as PouchDB from 'pouchdb';

Any ideas or suggestions are welcome! Thank you!

Answer 1

Remove the ./ , like so:

const map: any = {
  'pouchdb': 'vendor/pouchdb/dist/',
};

Shout out to https://github.com/delasteve who pointed this out to me on https://gitter.im/angular/angular-cli .