1

I'm using Angular 4 with webpack and I'm not able to use a jQuery plugin,with angular cli it works,with webpack not

I've included the plugin in webpack.config.vendor.js

const treeShakableModules = [
   .....
    '@angular/router',
    'zone.js',
    'virtual-keyboard',

If i check the source page at

script src="/dist/vendor.js?v=SsiHzOEk9BPk3CnH6ivS_kkChKmOOxXsB-fFyDO1R8w"></script>

I can find the js plugin code

In my .ts code I have

import * as $ from 'jquery';
....
$('#mycontrol').css('background-color', 'red');// I see the change so jQuery works
(<any>$('#mycontrol')).keyboard();

In console I got this error: $(...).keyboard is not a function

with angular cli works very simple with this code

declare var $: any;
 $('#mycontrol').keyboard();

thanks

mrapi
  • 5,831
  • 8
  • 37
  • 57

2 Answers2

1

you can import it inside your component like this:

import * as $ from 'jquery';

anf of course import jquery.js in angular-cli.json

Fateh Mohamed
  • 20,445
  • 5
  • 43
  • 52
  • thanks.I have no angular-cli.it is only webpack(webpack.config.js) .now how to import my plugin file,located in node_modules? – mrapi Oct 27 '17 at 14:58
  • 1
    in your webpack.config.js module.exports = { resolve: { alias: { jquery: "jquery/src/jquery" } } }; – Fateh Mohamed Oct 27 '17 at 15:06
  • or you can use the [imports-loader](http://reactkungfu.com/2015/10/integrating-jquery-chosen-with-webpack-using-imports-loader/) – Fateh Mohamed Oct 27 '17 at 15:08
  • I have 2 files webpack.config.js and webpack.config.vendor.js. Inside webpack.config.js I have 2 resolve: sections. But where to put my plugin.js file?.thanks – mrapi Oct 27 '17 at 15:24
  • I've loaded jQuery successfully. I've included my plugin in webpack.config.vendor.js at const treeShakableModules =[...] but function inside are not recognized: $(...).mymethod is not a function – mrapi Oct 27 '17 at 16:11
  • ufff... I've used tis code import * as $ from "jquery"; import "virtual-keyboard"; and plugin started to work but it gives me this error : "Error: jQuery requires a window with a document",after 3 refreshes of the page error is gone... – mrapi Oct 28 '17 at 12:54
  • 1
    please add this line to your webpack config : window.$ = window.jQuery = require('jquery'); – Fateh Mohamed Oct 28 '17 at 13:45
  • Hi.I put it on webpack.config.js now i got AggregateException: One or more errors occurred. (window is not defined ReferenceError: window is not defined at Object. (..webpack.config.js:6:2) – mrapi Oct 28 '17 at 14:55
  • 1
    ok add this to ebpack config "new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' })" and delete jquery from alias and try again please – Fateh Mohamed Oct 28 '17 at 15:02
  • I already have this line webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' }), – mrapi Oct 28 '17 at 15:04
  • I have 2 files webpack.config.vendor.js and webpack.config.js,none contain alias.thanks – mrapi Oct 28 '17 at 15:10
1

first you should to add it webpack config : 

 plugins: [

        new HtmlWebpackPlugin({
            template: 'src/index.pt'
        }),


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

    ]

after in your component you can import it : 

import * as $ from 'jquery';

this is a global solution access to jquery then several options exist.

of course don't forget to install jquery via npm :

npm i --save jquery
Anouar Mokhtari
  • 2,084
  • 4
  • 23
  • 23
  • Hi.I've edited my first post because I successfuly included jQuery,but now now I got error on plugin functions.thanks – mrapi Oct 28 '17 at 08:48
  • 1
    add in resolove section a new alias resolve: { alias: { jquery: "jquery/src/jquery" }, – Anouar Mokhtari Oct 28 '17 at 09:27
  • 1
    or there are another way to put $ as a global context like that : var $ = require('jquery'); window.$ = $; – Anouar Mokhtari Oct 28 '17 at 09:29
  • hi,I have 2 sections,I've added after the first , extensions: [ '.js' ], alias: { jquery: "jquery/src/jquery" } but now got this error: NodeInvocationException: Prerendering failed because of error: ReferenceError: window is not defined on second solution : Property '$' does not exist on type 'Window' – mrapi Oct 28 '17 at 09:56
  • lots of test but ending with this error $(...).keyboard is not a function – mrapi Oct 28 '17 at 11:05