undefined variable localforage in angular2/typescript project

Question

I have a problem adding localForage to my angular2-seed project (uses typings and webpack). I'm new to typings and angular2.

With the typings commands, I added the Typescript definitions to typings.json

    "localforage": "registry:dt/localforage#0.0.0+20160316155526",

In my vendor.ts file I added

const localforage:LocalForage = require("localforage");

In my service.ts file my IDE can resolve the import and does auto-complete

import {localforage} from "localforage";

this.store = localforage.createInstance({
  name: "products"
})

but when I run the application, the imported localforage is undefined

ORIGINAL EXCEPTION: TypeError: Cannot read property 'createInstance' of undefined
ORIGINAL STACKTRACE:
TypeError: Cannot read property 'createInstance' of undefined
    at new SearchService (eval at <anonymous> (http://localhost:3000/app.bundle.js:36:2), <anonymous>:20:53)
    at eval (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:189:2), <anonymous>:13:47)
    at Injector._instantiate (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:141:2), <anonymous>:777:27)
    at Injector._instantiateProvider (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:141:2), <anonymous>:715:25)
    at Injector._new (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:141:2), <anonymous>:704:21)
    at InjectorInlineStrategy.getObjByKeyId (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:141:2), <anonymous>:247:33)
    at Injector._getByKeyDefault (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:141:2), <anonymous>:921:37)
    at Injector._getByKey (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:141:2), <anonymous>:867:25)
    at Injector._getByDependency (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:141:2), <anonymous>:853:25)
    at Injector._instantiate (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:141:2), <anonymous>:743:36)

Any suggestions?, thanks!

Answer 1

It looks like you have forgot to instruct systemjs (as you are using angular2 I assume its your loader) what is localforage and where to load it from. Something like this should do the trick:

System.config({
 .....
  paths: {
    localforage: 'path/to/localforage/dist/localforage'
  }
 .....
});

System.defaultJSExtensions = true;

Hope this helps

Answer 2

Typings are only for compilation and not for runtime. So you need to configure SystemJS in your entry HTML file:

System.config({
  map: {
    localforage: '/path/to/localforage.js'
  },
  (...)
});

This way you will be able to import the localforage module:

import localforage from 'localforage';

Answer 3

最后，这不是脚本加载问题，但我忘了在vendor.ts添加export关键字

export const localforage:LocalForage = require("localforage");