SystemJS（Typescript）を使用して（SQLite3の）依存関係を再帰的に読み込むにはどうすればよいですか？

Question

最近、typescript、Angular2、nw.jsで遊んだことがあります。

私は、単純なjavascript用のAngular2クイックスタートガイドに基づいた小さなプロジェクトを持っており、動作させました。私はsqlite3を追加し、nw.jsでも動作させるため、データベースからヒーローを読み込むことができました。

Angular2を使用すると、角度チュートリアルで示しているように、typescriptが移動するように見えます。だから私は別のプロジェクトを試し、チュートリアルのこれらすべてのステップに従って、それをローカルで（ブラウザー上でも）nw.jsでも動作させました。

しかし、私はそれらのどちらでも動作しないsqlite3を得ることができません。 私が理解するように、typescriptにjsライブラリを追加する最も良い方法は、それらに型を追加することです。幸いにも、sqlite3 DefinitelyTypedライブラリがあります。

私は、次のコマンドでsqlite3のインストール：今、私は私のサービス上にsqlite3をインポートしたいので、私はそれにこれらの行を追加

typings install dt~sqlite3 --global --save

と

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

とインストールタイピング：

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

typescriptはエラーなしでコンパイルされるようになりましたが、ブラウザまたはそれがルートからsqlite3の直接ダウンロードして、私は、このエラーを与えることを試みるnw.js：

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

sqlite3のはもちろんのないプロジェクトのルートにあるので、このための404で実行されます。とにかくこの場所でそれを探しているのはなぜですか？

マイアプリの構造は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 

の終わりのようなものです私のtypings.json：私のhero.service.tsの

{ 
    "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" 
    } 
} 

トップ：

/// <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 { 
    // ... 

編集： @ arpit-agarwalのおかげで、私はsqlite3を私のsystemjs.config.jsに追加しました。エラーは別のものです。これは、ノードpre-gyp、パス、イベントなどのsqlite依存性をロードすることができません。私はマップのプロパティでこれらを設定することができますが、明らかに行く方法ではない、すべての依存関係のパスを設定する（とsqlite3それらの多くがあります）手で。これは、node.jsに含まれるパッケージであるイベントでは機能しません。私のsystemjs.config.jsは次のようになります。

/** 
* 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); 

完全なエラーメッセージsystemjs.config.js編集後：

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

また

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

に404を取得するので、そこにあります依存モジュールをロードするようにsystemjsに指示する適切な方法？

Edit2： 私はangular-cli-buildでプロジェクトをセットアップし、@ arpit-agarwalの手順を提案しましたが、同じ問題が発生してイベントとパスが読み込まれません。 NGビルドがで失敗します。

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 

私はまた、JSPMでプロジェクトを試みたが、私は私には無意味なようだNPM代わりにJSPMでそれをインストールしない限りAngular2を動作させることはできません。これも同じ問題を引き起こしました。 Angular、JSPMなどに関するいくつかのブログやチュートリアルを読んだ後、私はこの作業をするためのアイディアが不足しています。

ここで私に迷惑をかけているのは、プレーンなjavascriptで動作しました。私はSQLite3データベースからデータをロードしているAngular2でnw.jsで実行しているアプリケーションを持っています。しかし、単純なjavascriptでAngular2アプリを書くのは簡単ではありません。ほぼすべてのドキュメントとチュートリアルでは、タイスクリプトを使用しています。そして、私はそれが素敵な言葉であることがわかります。たぶん私は反応を見ているかもしれない。

SystemJS以外の用途のような代替手段がありますか？私はまだnode.jsの新機能です。

Answer 1

angular-cli-build.jsファイルを更新すると、sqlite3〜vendorディレクトリにコピーする必要があります。 sqlite3/**/*.*vendorNpmFilesタグのエントリとして。 npm startでビルドを実行した後。このファイルがdist/vendorディレクトリにあることを完全に検証する必要があります。 また、system.config.tsを更新して、ベンダーのディレクトリでsqllite3を探す必要があります。 map機能の追加

​​