Wie Abhängigkeiten (von SQLite3) rekursiv mit SystemJS (in Typescript) geladen?

Question

Ich habe kürzlich mit Typoskript, Angular2 und nw.js gespielt.

Ich habe ein kleines Projekt basierend auf der Angular2 Quickstart Anleitung für plain Javascript und habe es funktioniert. Ich habe sqlite3 hinzugefügt und das sogar in nw.js funktioniert, damit ich einige Helden aus der Datenbank laden kann.

Nun, wie das Angular Tutorial zeigen kann, scheint Typoskript der Weg zu gehen, wenn Sie Angular2 verwenden. Also habe ich ein anderes Projekt ausprobiert, alle diese Schritte im Tutorial verfolgt und es sowohl lokal (im Browser) als auch in nw.js funktioniert.

Allerdings kann ich nicht sqlite3 in keiner von ihnen arbeiten. Wie ich verstehe, ist der beste Weg, um js-Bibliotheken in Typoskript hinzuzufügen, das Hinzufügen von Typisierungen zu ihnen. Glücklicherweise gibt es eine sqlite3 DefinitelyTyped lib.

Ich installierte sqlite3 mit dem folgenden Befehl:

npm install sqlite3 --build-from-source --runtime=node-webkit --target_arch=x64 --target=0.15.4

und installiert Typisierungen mit

typings install dt~sqlite3 --global --save

Jetzt habe ich sqlite3 auf meinen Dienst importieren möchten, so fügte ich diese Zeilen hinzu:

/// <reference path="../typings/index.d.ts"/> 
import * as sqlite3 from 'sqlite3'; 
let db = new sqlite3.Database('../data/database.sqlite'); 

Das Typoskript kompiliert jetzt ohne Fehler, aber wenn ich die Website in entweder laden der Browser oder nw.js es sqlite3 direkt von der Wurzel zum Download versucht und geben Sie mir diesen Fehler:

Error loading http://localhost:3000/sqlite3 as "sqlite3" from http://localhost:3000/app/hero.service.js 

sqlite3 natürlich ist in Projektstamm nicht, so läuft es in einem 404 dafür. Aber warum sucht es überhaupt an diesem Ort?

Meine app Struktur ist wie am Ende des routing step in the Angular2 tutorial

project 
| 
+-- app 
| | 
| +-- hero.service.ts 
| 
+-- data 
| | 
| +-- database.sqlite 
| 
+-- node_modules 
| | 
| +-- sqlite 3 
|  | 
|  +-- sqlite3.js 
| 
+-- typings 
| | 
| +-- index.d.ts 
| | 
| +-- globals 
|  | 
|  +-- sqlite3 
|   | 
|   +-- index.d.ts 

Mein typings.json:

{ 
    "globalDependencies": { 
    "core-js": "registry:dt/core-js#0.0.0+20160602141332", 
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255", 
    "node": "registry:dt/node#6.0.0+20160621231320", 
    "sqlite3": "registry:dt/sqlite3#2.2.3+20160316155526" 
    } 
} 

Top meiner hero.service.ts:

/// <reference path="../typings/index.d.ts"/> 

import { Injectable } from '@angular/core'; 

import { Hero } from './hero'; 
import { HEROES } from './mock-heroes'; 

import * as sqlite3 from 'sqlite3'; 

sqlite3.verbose(); 
let db = new sqlite3.Database('../data/database.sqlite'); 

@Injectable() 
export class HeroService { 
    // ... 

Edit: Also danke @ Arpit-Agarwal Ich habe sqlite3 meiner systemjs.config.js und jetzt hinzugefügt Der Fehler ist ein anderer. Es lädt keine SQL-Abhängigkeiten wie Node-Pre-Gyp, Pfade, Ereignisse und so weiter. Ich kann diese in Map-Eigenschaft festlegen, aber es kann eindeutig nicht der Weg sein, den Pfad zu jeder Abhängigkeit (und sqlite3 hat eine Menge von ihnen) von Hand festzulegen. Dies funktioniert nicht für ein Ereignis, da es ein Paket ist, das in node.js enthalten ist. Meine systemjs.config.js sieht wie folgt nun:

/** 
* System configuration for Angular 2 samples 
* Adjust as necessary for your application needs. 
*/ 
(function(global) { 
    // map tells the System loader where to look for things 
    var map = { 
     'app': 'app', // 'dist', 
     '@angular': 'node_modules/@angular', 
     'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', 
     'rxjs': 'node_modules/rxjs', 
     'sqlite3': 'node_modules/sqlite3' 
    }; 
    // packages tells the System loader how to load when no filename and/or no extension 
    var packages = { 
     'app': { main: 'main.js', defaultExtension: 'js' }, 
     'rxjs': { defaultExtension: 'js' }, 
     'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }, 
     'sqlite3': { main: 'sqlite3.js', defaultExtension: 'js' } 
    }; 
    var ngPackageNames = [ 
     'common', 
     'compiler', 
     'core', 
     'forms', 
     'http', 
     'platform-browser', 
     'platform-browser-dynamic', 
     'router', 
     'router-deprecated', 
     'upgrade', 
    ]; 
    // Individual files (~300 requests): 
    function packIndex(pkgName) { 
     packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' }; 
    } 
    // Bundled (~40 requests): 
    function packUmd(pkgName) { 
     packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' }; 
    } 
    // Most environments should use UMD; some (Karma) need the individual index files 
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd; 
    // Add package entries for angular packages 
    ngPackageNames.forEach(setPackageConfig); 
    var config = { 
     map: map, 
     packages: packages 
    }; 
    System.config(config); 
})(this); 

Vollfehlermeldung nach systemjs.config.js edit:

Error loading http://localhost:3000/node-pre-gyp as "node-pre-gyp" from http://localhost:3000/node_modules/sqlite3/lib/sqlite3.js 

Auch 404 erhalten auf

http://localhost:3000/path 
http://localhost:3000/events 
http://localhost:3000/util 

So gibt es eine richtige Methode, Systemjs zu sagen, dass sie auch Abhängigkeitsmodule laden sollen?

Edit2: Ich habe ein Projekt mit angular-cli-build und die Schritte, die @ arpit-agarwal vorgeschlagen, aber ich laufe auf das gleiche Problem, dass es nicht lädt Ereignisse und Pfad. ng build nicht mit:

Error on fetch for node-pre-gyp at file:///C:/Dev/ang_test/tmp/bundle_plugin-input_base_path-wATtw5FK.tmp/0/node-pre-gyp 
    Loading vendor/sqlite3/lib/sqlite3.js 
    Loading vendor/sqlite3/sqlite3.js 
    Loading app/hero.service.js 
    Loading app/heroes/heroes.component.js 
    Loading app/app.routes.js 
    Loading main.js 
    Error: ENOENT: no such file or directory, open 'C:\Dev\ang_test\tmp\bundle_plugin-input_base_path-wATtw5FK.tmp\0\node-pre-gyp 

ich auch ein Projekt mit jspm versucht, aber nicht Angular2 zu arbeiten, wenn ich es mit npm statt jspm installieren, die mir sinnlos scheint. Auch dies führte zu dem gleichen Problem. Nachdem ich mehrere Blogs und Tutorials über Angular, JSPM usw. gelesen habe, sind mir die Ideen ausgegangen, damit das funktioniert.

Was nervt mich hier ist, hat es mit plain javascript funktioniert. Ich habe eine App in nw.js mit Angular2, die Daten aus einer SQLite3-Datenbank lädt. Aber es ist nicht einfach, eine Angular2 App mit einfachem Javascript zu schreiben. Fast alle Dokumente und Tutorials verwenden Typoskript. Und ich kann sehen, es ist eine nette Sprache. Vielleicht schaue ich mir das an.

Gibt es eine Alternative, verwenden Sie etwas anderes als SystemJS? Ich bin noch sehr neu bei node.js.

Answer 1

Sie müssen sqlite3 in das Verzeichnis vendor kopieren, indem Sie die Datei angular-cli-build.js aktualisieren. sqlite3/**/*.* als Eintrag in vendorNpmFiles Tag. Sobald Sie Build über npm start ausführen. Sie sollten diese Datei im Verzeichnis dist/vendor manuell überprüfen. Sie müssen auch system.config.ts aktualisieren, um im Lieferantenverzeichnis nach sqllite3 zu suchen. Innerhalb der map Funktion hinzufügen

Sqlite3: vendor/sqlite3 // you can give full path of JS file as well depending upon usage and error message.