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.

i.e. 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.

score 29 · Answer 1 · answered Mar 01 '17 at 08:49

29

i use jQuery in my project as follows.

Install jQuery
```
npm install --save jquery
```
Install jQuery type defination for type checking.
```
npm install --save-dev @types/jquery
```
Add refenece of jquery file in "scripts" array inside angular-cli.json file.
```
"scripts": [
    "../node_modules/jquery/dist/jquery.min.js"
 ]
```
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.

answered Mar 01 '17 at 08:49

HirenParekh

3,655
3
24
36

The problem is when you use some library that extends jQuery operator (like select2), you can't use it. You end up with `$(...).select2` throwing error, because `select2` is not known property of $ (or jQuery after your import). – metamaker Mar 01 '17 at 09:06
1

Have you installed the type definition for select2 library. After installing type definition import select2 in your component. – HirenParekh Mar 01 '17 at 09:35
Type definitions do nothing with adding select2 property to global jQuery object. I was able to solve my issue using `ng eject`. Thanks for your effort, anyway! – metamaker Mar 03 '17 at 17:40
1

u don't need to import jQuery, declare var $: any should do – Ayyash Aug 21 '17 at 18:22

maqduni · Answer 2 · 2017-04-10T03:19:54.167

1

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: '$' }
    ]
  },

edited Apr 10 '17 at 03:19

answered Mar 08 '17 at 19:39

maqduni

459
7
8

Thanks, although which file would I add the above configuration in? – Prakash Raman Sep 28 '17 at 05:13
It has to be in the list of loaders of webpack.config. – maqduni Sep 28 '17 at 14:57

score 0 · Answer 3 · answered Feb 28 '17 at 14:14

0

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

answered Feb 28 '17 at 14:14

Evans M.

1,791
16
20

metamaker · Accepted Answer · 2017-03-31T13:13:56.150

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

// ...

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

4 Answers4

Linked