Angular 2
[email protected]β10でサードパーティのプラグインをインストールする

備考

 'lodash': {
   format: 'cjs',
   defaultExtension: 'js',
   main: 'index.js'
 }

 'moment': {
   main: 'moment.js'
 }

angular-cliプロジェクトでのjqueryライブラリの追加

1. npm経由でjqueryをインストールします。

 npm install jquery --save 

ライブラリの入力をインストールします。

ライブラリの入力を追加するには、次の操作を行います。

typings install jquery --global --save

2. angular-cli-build.jsファイルにjqueryをvendorNpmFiles配列に追加します。array：

   これは、ビルドシステムがファイルを受け取るために必要です。セットアップ後、angular-cli-build.jsは次のようになります：

node_modulesを参照して、ベンダーフォルダーに追加するファイルとフォルダーを探します。

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      // ...
      'jquery/dist/*.js'


    ]
  });
};

3. jQueryを探す場所を知るためのSystemJSマッピングを設定する：

   SystemJSの設定はsystem-config.tsにあり、カスタム設定が完了した後、関連するセクションは次のようになります。

/** Map relative paths to URLs. */
const map: any = {
  'jquery': 'vendor/jquery'
};

/** User packages configuration. */
const packages: any = {
            
// no need to add anything here for jquery

};

4. src / index.htmlこの行を追加してください

<script src="vendor/jquery/dist/jquery.min.js" type="text/javascript"></script>

その他のオプションは次のとおりです。

<script src="vendor/jquery/dist/jquery.js" type="text/javascript"></script>

または

<script src="/vendor/jquery/dist/jquery.slim.js" type="text/javascript"></script>

そして

<script src="/vendor/jquery/dist/jquery.slim.min.js" type="text/javascript"></script>

5. プロジェクトソースファイルのjqueryライブラリのインポートと使用：

   あなたのソース.tsファイルにjqueryライブラリを次のようにインポートします：

declare var $:any;

@Component({
})
export class YourComponent {
  ngOnInit() {
    $.("button").click(function(){
       // now you can DO, what ever you want 
     });
     console.log();
  }
}

ステップを正しく実行した場合は、プロジェクトでjqueryライブラリを使用する必要があります。楽しい！

入力がないサードパーティライブラリを追加する

注意してください、これは、1.0.0-beta.10までのangle-cliバージョンのみです！

一部のライブラリやプラグインにはタイピングがない場合があります。これらがなければ、TypeScriptは型をチェックすることができないため、コンパイルエラーが発生します。これらのライブラリは引き続き使用できますが、インポートされたモジュールとは異なります。

1. あなたのページにライブラリへのスクリプトリファレンスを含める（ index.html ）

   <script src="//cdn.somewhe.re/lib.min.js" type="text/javascript"></script>
   <script src="/local/path/to/lib.min.js" type="text/javascript"></script>
   

   • これらのスクリプトは、グローバル（たとえば、 THREE 、 mapbox 、 $など）を追加するか、グローバル

2. これらを必要とするコンポーネントでは、libで使用されるグローバル名と一致する変数を初期化するためにdeclareを使用します。これにより、TypeScriptはすでに初期化されていることがわかります。 ¹

   declare var <globalname>: any;
   

   いくつかのlibsは、アプリケーションにアクセスできるように拡張する必要があるwindowに添付しwindow 。

   interface WindowIntercom extends Window { Intercom: any; }
   declare var window: WindowIntercom;
   

3. 必要に応じてコンポーネント内のlibを使用します。

   @Component { ... }
   export class AppComponent implements AfterViewInit {
       ...
       ngAfterViewInit() {
           var geometry = new THREE.BoxGeometry( 1, 1, 1 );
           window.Intercom('boot', { ... }
       }
   }
   

   • 注：一部のlibsはDOMとやりとりできるため、適切なコンポーネントライフサイクルメソッドで使用する必要があります 。