How to include jQuery properly in angular cli 1.0.0-rc.0?

Question

I use jQuery-based select2 component in my AngularJS project. I had similar issue as guys here: https://github.com/fronteed/icheck/issues/322 , and solved it using advice from there. To be accurate, I received error TypeError: $(...).select2 is not a function when not using that advice.

ie I added next lines to configuration of Webpack in @angular/cli/models/webpack-configs/common.js .

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

Is it the best possible way to enable jQuery in angular/cli?

I don't think that doing same as in https://github.com/angular/angular-cli/wiki/stories-global-lib is correct way, because

a) webpack bundles jQuery without need to specify it in scripts

b) it still throws TypeError: $(...).select2 is not a function error when you include it as described in story.

Answer 1

i use jQuery in my project as follows.

1. Install jQuery

    npm install --save jquery 

2. Install jQuery type defination for type checking.

    npm install --save-dev @types/jquery 

3. Add refenece of jquery file in "scripts" array inside angular-cli.json file.

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

4. import jquery in any component you want to use.

    import * as jQuery from 'jquery'; 

that's it. the same way you can also use other libraries like moment.js , d3.js etc.

Answer 2

You could also use expose-loader . The example below is written for webpack 2,

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

Answer 3

Adding it in the same way as the link you provided will guarantee it's loaded. Otherwise try below in your component.

npm install jquery

Then use in your component

declare var $:any;
var $ = require('jquery');

Answer 4

I was able to achieve what I needed by exposing Webpack. Use ng eject command.

First, install jQuery using npm install -S jquery (and I also installed npm install -S select2 , because I needed that too).

Then, make sure that you made backup of your package.json file, since during ng eject Angular CLI will try to add its Webpack dependencies inside your package.json.

After ng eject finished working, inside webpack.config.js I added

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

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

And now select2 adds $(...).select2 function to global jQuery object properly!

To use jQuery with select2 inside your .ts file, you can add next lines at the beginning of that file:

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));

// ...