外部ライブラリをAngular 2（Systemjs）にインポート

Question

私はAngular 2プロジェクトでthis libraryを使用しようとしています。私が試した： npm install search-query-parse --save そして：

1. Adding via <script> in index.tsを - 設定ファイルに追加し、その後import { searchQuery} from 'search-query-parser';を使用して（当然）

RequireJSを通じて追加

2. をファイルにexportを理解していません - 私はそれを使用することはできませんけれども...私が取得、ファイルがネットワークインスペクタを使ってロードされて見ることができますUnhandled Promise rejection: (SystemJS) Can't resolve all parameters

私は何が欠けていますか？

編集：ここでは

これは、あなたがそれがバンドルされるように外部スクリプトをもたらすだろうとどのように一般的である私のシステム-config.ts（relavant部品...）

map: { 
    'search-query-parser': 'npm:search-query-parser'  
}, 
packages: { 
    'search-query-parser': { main: './index.js', defaultExtension: 'js' 
} 

Answer 1

それは主にあなたのケースで、モジュール自体に依存します。

は、この問題を解決するには、いくつかの方法がありますが、この状況で最も簡単な1を使用している：それはSEARCHQUERY定数内のすべてをインポートしますので、あなたが使用しますので、

import * as searchQuery from 'search-query-parse' 

これは、問題を修正します。

searchQuery.parse(params) 

.parseメソッドが公開されているためです。

import { parse } from 'search-query-parse' 

とブラケット表記（{}）は正確方法のためになりますので、つまりparse(params)

としてそれを使用します。

また、あなたはまた、parseメソッドのみをインポートすることができます/括弧内の名前を公開するモジュールによってエクスポートされたプロパティ。

両方の方法でまだ成功していない場合は、モジュールがSystemJSに含まれていない可能性があります（ただし、その場合はエラーが表示されます）。 このような問題（いくつかの問題は、実際にtypescriptに対応しているノードまたはSystemJSモジュールを検索するためのものです）がありますが、最も簡単なものは、systemjsの設定が含まれているHTMLファイルを探しています。ラッパー（System.import(app)）とは、そのような呼び出しの前に、自分でモジュール定義：このように

System.set("search-query-parse", System.newModule(require('search-query-parse')); 

を、あなたは、実行時に、それはノードモジュールを作るために必要SystemJSを言っている「検索クエリの解析"search-query-parse"の下で利用できるので、バニラスタイルのタイスクリプトで使用すると、バニラスタイルが必要になります：

const sqp = require('search-query-parser'); 

このような問題を解決する他の方法（通常はsystemjsファイル）もありますが、これらは最も簡単で移植性の高いものです。

Answer 2

で、 （CLIを使用していると仮定して）アプリケーションで使用できます。angular-cli.jsonでは、「script」要素に注意してください。それを置くと、バンドルされ、デープが解決します（うまくいけば）。私はこれを数多くの異なるスクリプトに対して行ってきました。彼らは常に働きます。

"mobile": false, 
    "styles": [ 
     "../node_modules/bootstrap/dist/css/bootstrap.css", 
     "../node_modules/font-awesome/css/font-awesome.css", 
     "styles.css" 
    ], 
    "scripts": ["./app/my_script.js"], 
    "environments": { 
     "source": "environments/environment.ts", 
     "dev": "environments/environment.ts", 
     "prod": "environments/environment.prod.ts" 
    } 

は、その上の記事を書いた：http://www.tcoz.com/newtcoz/#/errata