web-dev-qa-db-ja.com

angular cli 1.0.0-rc.0？にjQueryを適切に含める方法

私はAngularJSプロジェクトでjQueryベースのselect2コンポーネントを使用しています。私はここでみんなと同様の問題を抱えていました： https://github.com/fronteed/icheck/issues/322 、そしてそこからのアドバイスを使用してそれを解決しました。正確には、そのアドバイスを使用していないときにエラーTypeError: $(...).select2 is not a functionを受け取りました。

つまり、次の行をWebpackの構成に_@angular/cli/models/webpack-configs/common.js_で追加しました。

_plugins: [
  new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
]
_

Angle/cliでjQueryを有効にする最良の方法ですか？

https://github.com/angular/angular-cli/wiki/stories-global-lib と同じことをするのは正しいとは思わない。

a）webpackは、jQueryをスクリプトで指定せずにバンドルします

b）ストーリーで説明されているとおりに含めると、TypeError: $(...).select2 is not a functionエラーが引き続きスローされます。

javascriptjqueryangularangular-cli
9
metamaker

Webpackを公開することで、必要なものを達成することができました。 ng ejectコマンドを使用します。

最初に、npm install -S jqueryを使用してjQueryをインストールします（必要なため、npm install -S select2もインストールしました）。

その後、ng eject Angular CLIはpackage.json内にWebpackの依存関係を追加しようとするため、package.jsonファイルのバックアップを作成したことを確認してください。

ng ejectの動作が終了した後、webpack.config.js内に追加しました

// ... Inside require/imports part
const ProvidePlugin = require('webpack/lib/ProvidePlugin');

// ... Inside `plugins` section of Webpack configuration
new ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })

そして今select2は$(...).select2関数をグローバルjQueryオブジェクトに適切に追加します！

.tsファイル内のselect2でjQueryを使用するには、そのファイルの先頭に次の行を追加できます。

import "select2";
import "jquery";
declare var $: any;

// Somewhere deep within component
// ...

$(this.input.nativeElement)
    .select2(config)
    .on("change select2:select select2:unselect", (e: any) => this.onSelect2ElementChange(e));

// ...
0
metamaker

私は次のように私のプロジェクトでjQueryを使用しています。

  1. JQueryをインストールする

    npm install --save jquery

  2. 型チェックのためにjQuery型定義をインストールします。

    npm install --save-dev @types/jquery

  3. Angular-cli.jsonファイル内の「scripts」配列にjqueryファイルの参照を追加します。

    "scripts": [
    "../node_modules/jquery/dist/jquery.min.js"
 ]

  4. 使用するコンポーネントにjqueryをインポートします。

    import * as jQuery from 'jquery';

それでおしまい。 moment.js、d3.jsなどの他のライブラリも使用できるのと同じ方法.

26
HirenParekh

expose-loader を使用することもできます。以下の例は、webpack 2向けに書かれています。

{ test: /[\/]jquery\.js$/,
    use: [
      { loader: 'expose-loader', query: 'jQuery' },
      { loader: 'expose-loader', query: '$' }
    ]
  },
1
maqduni

指定したリンクと同じ方法で追加すると、確実にロードされます。それ以外の場合は、コンポーネントで以下を試してください。

npm install jquery

次に、コンポーネントで使用します

declare var $:any;
var $ = require('jquery');
0
Evans M.