Angular-cliの開発環境でのjQueryの導入方法を説明します。
１．Angular-cliの導入
最初にangular-cliを導入します。angular-cliが未導入の場合は以下を参考にして下さい。
Angular2の開発環境を構築（angular-cli）
２．Angular2のプロジェクト作成
作業ディレクトリ（当サイトでは「C:\ng2test」）に、サンプルプロジェクトを「sample3」を作成します。プロジェクト作成は以下を参考にして下さい。
|
1 2 3 4 5 6 7 8 9 |
C:¥ng2test>ng new sample3 C:¥ng2test>cd sample3 C:¥ng2test¥sample3> C:¥ng2test¥sample3>ng serve |
３．jQueryのインストール
npmでjQueryのパッケージをローカルインストールします。[--save]オプションを指定して、package.jsonにパッケージ情報を書き込みます。
|
1 2 3 |
C:¥ng2test¥sample2>npm install jquery --save |
４．jQueryの型定義ファイルのインストール
npmでjQueryのパッケージをローカルインストールします。[--save--dev]オプションを指定して、package.jsonのdependenciesにパッケージ情報を書き込みます。
|
1 2 3 |
C:¥ng2test¥sample2>npm install @types/jquery --save--dev |
５．angular-cli.jsonの編集
angular-cli.jsonにjqueryのscriptsを追加します。
|
1 2 3 4 5 |
"scripts": [ "../node_modules/jquery/dist/jquery.min.js" ], |
６．動作テスト確認
お問い合わせ
