BloodhoundをAngular 2 CLIプロジェクトにインポートする

Question

Angular 2 CLIを使用しているAngular 2プロジェクトにBloodhound.jsを実装しようとしています。私はjQueryのは、次の方法で作業してい瞬間：

1. NPM

2. --save jqueryのインストールタイプ@ NPMをインストール/ jqueryの--save-devの

3. 次に「」を追加../node_modules/jquery/dist/jquery.min.js "'をangle-cli.json内のscripts配列に追加します。

   」../node_modules/bloodhound-js/dist/bloodhound.min.js：私は次のように、同様の角度-cli.jsonにBloodhound.jsのために同じことを行っている

「

私は次のエラーを取得するしかし：

は名 『ブラッドハウンド』を見つけることができません。

.jsファイルを直接インポートする方法とインポートをローカルに追加する方法はありますか。

Answer 1

私の解決策は次のとおりです。誰かがこれを助けることを願っています。

次のコマンドを使用してtypehead.jsタイプ定義をインストールします。

npm install --save @types/typeahead 

以下のファイルもangular-cli.jsonファイルに追加してください。

"assets/js/bloodhound.min.js", 
"assets/js/typeahead.bundle.min.js" 

私もjQueryのをインストールしているコンポーネント

const suggestions = [{ 
      value: 'string1' 
     }, { 
      value: 'string2' 
     }, { 
      value: 'string3' 
     }, { 
      value: 'string4' 
     }, { 
      value: 'string5' 
     }]; 

let bloodhoundSuggestions = new Bloodhound({ 
     datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), 
     queryTokenizer: Bloodhound.tokenizers.whitespace, 
     sufficient: 3, 
     local: this.suggestions 
}); 

$('#tagsInput .typeahead').typeahead({ 
     hint: true, 
     highlight: true, 
     minLength: 1 
    }, { 
     name: 'suggestions', 
     displayKey: 'value', 
     source: bloodhoundSuggestions 
    }); 

ののOnInit（）メソッドで次の操作を実行します。

import * as $ from 'jquery'; 

をapp.component.tsそして、あなたのコンポーネントファイルに次のようにインポートすることを確認するために以下を追加することを確認してください。

declare const Bloodhound; 
declare const $; 

コンポーネントのHTMLファイル

<div id="tagsInput"> 
    <input class="typeahead" type="text" placeholder="States of USA"> 
</div>