undefined Variable LocalForce in Angular2/Typescript-Projekt

Question

Ich habe ein Problem beim Hinzufügen von LocalForage zu meinem Angular2-Seed-Projekt (verwendet Typings und Webpack). Ich bin neu bei Typings und angular2.

Mit den Typisierungen Befehle, fügte ich hinzu, die Mitschrift Definitionen typings.json

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

In meiner vendor.ts Datei hinzugefügt ich

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

In meinem service.ts meine IDE-Datei kann den Import auflösen und tut auto- komplett

import {localforage} from "localforage"; 

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

bu t, wenn ich die Anwendung ausführen, die importierte localforage ist 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) 

Irgendwelche Vorschläge ?, Dank!

Answer 1

Es sieht so aus, als hätten Sie vergessen, systemjs anzuweisen (da Sie angular2 verwenden, nehme ich an, dass es sich um Ihren Loader handelt), was lokalesForce ist und wo es geladen werden soll. So etwas sollte es tun:

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

System.defaultJSExtensions = true; 

this helps

Answer 2

Typisierungen sind nur für die Kompilierung und nicht zur Laufzeit. Sie müssen also SystemJS in Ihrem Eintrag HTML-Datei konfigurieren:

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

Auf diese Weise können die localforage Modul zu importieren, werden in der Lage:

import localforage from 'localforage'; 

Answer 3

Endlich ist es kein Skript Laden Problem war, aber ich hinzuzufügen vergessen, das export Stichwort in vendor.ts

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