TypeScript、角度2、SystemJSでノードモジュールをインポートする

Question

私は基本的なAngular 2アプリを作成しています。ご覧のとおり、

import { compareSync, genSaltSync, hashSync } from 'bcrypt'; 
import { Document, Schema, model } from 'mongoose'; 

export class User { 
    username: string; 
    password: string; 

    isValidPassword(password: string): boolean { 
    return compareSync(password, this.password) 
    } 
} 

let userSchema = new Schema({ 
    username: { required: true, type: String }, 
    password: { required: true, type: String } 
}, { timestamps: true }); 

userSchema.pre('save', function (next) { 
    this.password = hashSync(this.password, genSaltSync(8)); 
    next(); 
}); 

export interface UserDocument extends User, Document {} 

export const Users = model<UserDocument>('User', userSchema); 

私はbcryptとmongoose NPMパッケージを使用しています：私はパスワードを検証するためにbcryptを使用する関数validPassword()を持つクラスUserを作成しています。

(function (global) { 
    System.config({ 
    map: { 
     '@angular': 'node_modules/@angular', 
     'bcrypt': 'node_modules/bcrypt', 
     'bindings': 'node_modules/bindings', 
     'mongoose': 'node_modules/mongoose', 
     'rxjs': 'node_modules/rxjs' 
    }, 
    paths: { 
     'node_modules/@angular/*': 'node_modules/@angular/*/bundles' 
    }, 
    meta: { 
     '@angular/*': {'format': 'cjs'} 
    }, 
    packages: { 
     'src': {main: 'main', defaultExtension: 'js'}, 
     '@angular/core': {main: 'core.umd.min.js'}, 
     '@angular/common': {main: 'common.umd.min.js'}, 
     '@angular/compiler': {main: 'compiler.umd.min.js'}, 
     '@angular/forms': {main: 'forms.umd.min.js'}, 
     '@angular/http': {main: 'http.umd.min.js'}, 
     '@angular/platform-browser': {main: 'platform-browser.umd.min.js'}, 
     '@angular/platform-browser-dynamic': {main:'platform-browser-dynamic.umd.min.js'}, 
     'bcrypt': {main: 'bCrypt.js'}, 
     'mongoose': {main: 'index.js'}, 
     'rxjs': {defaultExtension: 'js'} 
    } 
    }); 
}(this)); 

私のタイピングの依存関係は、次のとおりです：

{ 
    "compilerOptions": { 
    "baseUrl": ".", 
    "target": "es5", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false 
    } 
} 

を私はプロジェクトを実行するために行くときは、次のように

{ 
    "globalDependencies": { 
    "bcrypt": "registry:dt/bcrypt#0.0.0+20160316155526", 
    "core-js": "registry:dt/core-js#0.0.0+20160914114559", 
    "jasmine": "registry:dt/jasmine#2.5.0+20161003201800", 
    "mongodb": "registry:dt/mongodb#2.1.0+20160602142941", 
    "mongoose": "registry:dt/mongoose#4.5.9+20161010180758", 
    "node": "registry:dt/node#6.0.0+20161014191813" 
    } 
} 

私のTSconfigは次のように

私SystemJSが設定されていますコンソールに次のエラーが表示されます。

1274 GET http://localhost:8080/crypto 404 (Not Found) 
http://localhost:8080/node_modules/mongoose/lib.js 404 (Not Found) 
http://localhost:8080/node_modules/bindings/ 404 (Not Found) 

私はこれがSystemJSの問題だと思います。私はパッケージにマップオブジェクトに、たとえば、

'bindings': 'node_modules/bindings' 

を追加して、

'bindings': {main: 'bindings.js'}, 

に行くときSystemJS内のオブジェクト、私はエラーの全く新しいセットを取得（FSとパスを見つけることができません） 。

新しいパッケージをインストールするたびに、不足しているパッケージパスを手動で追加する必要がありますか？これを行うより良い方法はありますか？

Answer 1

私は最近、サーバー側をSystemJSで1つのファイルにバンドルするときに同じ問題が発生しました。問題は、少なくともmongoose（と私は他の人がいると思う）は、SystemJSはノード拡張形式をサポートしていないので、 "./lib"フォルダ内のindex.jsを探すのは理解できません。また、System.configに "mongoose/lib"を追加しても、mongooseはSystem.config.package.mongooseに不快な量のマッピングを必要とするノードモジュールの数に依存します。

私が見つけた解決策は、新しいSystemモジュールを作成し、System.configの上に必要な「パッケージ」に設定することです。

System.set('package', System.newModule({ 
    default: require('package') 
})); 

残念ながら、typescriptを使用している場合、インポート文では "パッケージ"にタイプが必要です。これらは基本的にインターフェイスと抽象クラスのセットであり、タイプスクリプトプロジェクト全体が関数、クラスなどを持つ "パッケージ"ライブラリを理解できるようになります。

mongooseのようなパッケージの種類には、輸出する。 ..あなたは、上記および下記のような輸入のようなマングースモジュールを設定している場合

import mongoose from 'mongoose'; 

ですからとしてタイピングタイプの上に述べたが、対応するデフォルトのエクスポートを持っていないので、transpilerまたはIDE typescriptですエラーのいずれかを取得することを確認しています。あなたのTSconfigで真に、このセットだけallowSyntheticDefaultImportsオプションを修正するには

。このことができます:)

Answer 2

をJSON

希望私はしばらくの間、同じ問題で立ち往生し、私は何のSystemJsが関与していないと思いアンギュラ-cliを使用していました。 は、私が '差分' ノードモジュールをロードしようとしていた、と私のために働い以下：

import * as JsDiff from 'diff';

出典：https://medium.com/@s_eschweiler/using-external-libraries-with-angular-2-87e06db8e5d1

はそれが役に立てば幸い！