Angular-cli: How to include jQuery properly?

[metamaker]

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.

[metamaker]

Opened question on SO http://stackoverflow.com/questions/42510334/how-to-include-jquery-properly-in-angular-cli-1-0-0-rc-0. Sorry for not following contributions guide at first place.

[jsfrocha]

Well, I guess if the solution for this is _not using_ Angular CLI, by ng ejecting out of it, it isn't really a solution, is it ?

I'm having the same problem, but would like to keep using the CLI without ejecting..

[lucaswxp]

+1

[metamaker]

Sorry, can't help much. At that point ng eject was only one real solution for me, not sure what is state of Angular at the moment. We completely switched to Aurelia, and I also played around with ReactJS for some time, and never encountered such headache with webpack configuration, imports or lifecycle callbacks strange behavior (and for ReactJS I was even able to port jQuery carousel component as React component from scratch within 2 hours). I will never return to Angular by my own free will. With other available frameworks my workflow is just times less annoying, bug free and productive.

[diegodesouza]

I've encountered this issue today, am looking for a solution if anyone has one other than ng eject?

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}