I've tried to have this:

import $ from 'jquery';
window.jQuery = $;
import angular from 'angular';

but $.fn.scope is undefined and scripts inside ng-bind-html don't work Injecting a script tag with ngBindHtml

also tried this in webpack config

module.exports = {
  module: {
    loaders: [
       { test: /angular(\.min)?\.js$/, loader: "imports?$=jquery" },
       { test: /jquery(\.min)?\.js$/, loader: 'expose?jQuery' }
    ]
  }
};

but got error:

ERROR in ./~/angular/angular.js
Module not found: Error: Cannot resolve module 'expose' in C:\project\src\ui\node_modules\angular
 @ ./~/angular/angular.js 2:8-25

I've tried to have this:

import $ from 'jquery';
window.jQuery = $;
import angular from 'angular';

but $.fn.scope is undefined and scripts inside ng-bind-html don't work Injecting a script tag with ngBindHtml

also tried this in webpack config

module.exports = {
  module: {
    loaders: [
       { test: /angular(\.min)?\.js$/, loader: "imports?$=jquery" },
       { test: /jquery(\.min)?\.js$/, loader: 'expose?jQuery' }
    ]
  }
};

but got error:

ERROR in ./~/angular/angular.js
Module not found: Error: Cannot resolve module 'expose' in C:\project\src\ui\node_modules\angular
 @ ./~/angular/angular.js 2:8-25

• javascript
• jquery
• angularjs
• webpack

• So I haven't used webpack, but I came across a similar loading issue with requireJS where I had to use a shim to express the module dependencies. github./webpack/docs/wiki/shimming-modules check this out for webpack shimming – Sterling Archer Commented Aug 22, 2016 at 13:18
• @SterlingArcher your link did help, thanks. – jcubic Commented Aug 22, 2016 at 13:29
• The issue is that import statements get hoisted, so window.jQuery = $; is executed after import angular from 'angular';. @MrJSingh's solution is pretty good for this problem though. – nils Commented Aug 22, 2016 at 14:00

3 Answers 3

this work:

module.exports = {
  module: {
    loaders: [
       { test: /angular(\.min)?\.js$/, loader: "imports?$=jquery" },
       { test: /jquery(\.min)?\.js$/, loader: 'expose?jQuery' }
    ]
  }
};

but you need to install expose-loader from npm:

npm install expose-loader --save

Why not use a very nice and simple plugin for webpack

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

ES6-seed with webpack and jquery

We used @jcubic solution in webpack 4 like this:

npm install expose-loader imports-loader --save

module: {
  rules: [
    {
      test: require.resolve('angular'),
      use: 'imports-loader?$=jquery',
    },
    {
      test: require.resolve('jquery'),
      use: [
        {
          loader: 'expose-loader',
          options: 'jQuery',
        },
        {
          loader: 'expose-loader',
          options: '$',
        },
      ],
    },
  ]
}