Angular + Webpack + jQuery. Where is the configuration file?

user_127511 0
Viewed 356

I am using Angular 4.

@angular/core: 4.3.6

I am looking into using expose-loader to expose jQuery as a global variable. And multiple answers suggest using expose-loader by installing and editing the 

webpack.config.js

file.

Although, I can't seem to locate it in my angular 4 app file tree.

Any thoughts?

angular-cli angular webpack jquery
3 Answers

I would not recommend to --eject webpack.config just for a sake of adding jQuery
You can avoid that just by doing:

npm install jquery --save
npm install @types/jquery --save-dev

then import that in .angular-cli.json scripts section

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

and you should be fine
Use that as import * as $ from 'jquery';

user_4150780

  1. Install jQuery

    npm install --save jquery

  2. Install jQuery type definition for type checking.

    npm install --save-dev @types/jquery

  3. Add reference 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';
user_64748110

You need to install the jQuery type definition file:

npm install @types/jquery

And also, in your webpack.config.js file: 

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