Enable jQuery in Angular2 using webpack and access it from component

Question

I want to include jQuery and SignalR in my Angular2 -Application and connect everything using webpack.

So I installed jQuery through npm.

package.json

"dependencies": { // ... "jquery": "2.1.4", // ... }, 

Files and folders are installed correctly.

Now I am targeting these files in my vendor.ts to get a web package to find and enable them:

 import 'jquery'; import 'bootstrap/dist/js/bootstrap.js'; import '../../bower_components/signalr/jquery.signalR'; 

And webpack receives these files and prepares them. I see this in my vendor.js. There is jQuery here. Also jquery signalR-File.

My webpack.config:

 var webpack = require("webpack"); var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: { "vendor": "./wwwroot/app/vendor", "polyfills": "./wwwroot/app/polyfills", "app": "./wwwroot/app/boot" }, output: { path: __dirname, filename: "[name]-[hash:8].bundle.js" }, resolve: { extensions: ['', '.ts', '.js', '.html'] }, devtool: 'source-map', module: { loaders: [ { test: /\.ts/, loaders: ['ts-loader'], exclude: /node_modules/ }, { test: /\.html$/, loader: 'html' }, { test: /\.css$/, loader: 'raw' } ] }, plugins: [ new webpack.ProvidePlugin({ jQuery: 'jquery', $: 'jquery', jquery: 'jquery' }), //new webpack.optimize.DedupePlugin(), new webpack.optimize.CommonsChunkPlugin({ name: ["app", "vendor", "polyfills"] }) ] } 

Loaded into my index, for example:

 <script src="js/polyfills-2eba52f6.bundle.js"></script> <script src="js/vendor-2eba52f6.bundle.js"></script> <script src="js/app-2eba52f6.bundle.js"></script> 

But when I try to use it in my angular2 component, for example:

 // ... declare var jQuery:any; declare var $:any; @Injectable() export class MySignalRService { private connection; constructor() { this.connection = $.hubConnection(CONFIGURATION.baseUrls.server + 'signalr/'); jQuery.hubConnection(CONFIGURATION.baseUrls.server + 'signalr/'); // ... } //... 

I always get a message that

$. hubConnection is not a function

Error: jQuery not found. Please make sure jQuery is referencing the SignalR client JavaScript file before.

leak "$" and "jquery" undefined.

What can I do to access singalr function in webpack?

BR Tenoda

Answer 1

Pure solution: use load-loader !!

 npm install expose-loader --save-dev 

inside your vendor.ts

 > import 'expose?jQuery!jquery'; > import '../node_modules/signalr/jquery.signalR.js'; 

inside your webpack.config.ts

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

Explanation:
The jquery.signalR.js script is not really written as an umd module. This makes it the default and not downloadable webpack. The jquery.signalR.js script does not require jquery, but assumes that jQuery lives in the global variable window.jQuery. We can do this work in webpack by importing a jquery module using load-loader. This loader will make sure that the exported jquery value is displayed in jQuery global var. Thus, allowing you to load the signalr.js script as the next module.

Also, if you want to use signalr later with $, you will also need to use enableplugin for the jquery module. inside webpack.config.js

Answer 2

I investigated your problem and found the following solutions:

1) Use

 window.jQuery = require("jquery"); 

to import jQuery into your recording file

2) Modify webpack.config.js

  new webpack.ProvidePlugin({ jQuery: 'jquery', $: 'jquery', jquery: 'jquery', 'window.jQuery': 'jquery' <== add this line }), 

And then in your login file:

 import 'jquery'; 

Answer 3

I am not familiar with SignalR, but here are the steps by which I solved a similar problem, trying to get Spectrum jQuery Colorpicker to work in my application:

• Add libs to package.json file, dependency section

   "jquery": "3.1.1", "spectrum-colorpicker": "1.8.0" 

• Add typing to package.json file, section devDependencies

   "@types/spectrum": "1.5.27", "@types/jquery": "2.0.33", 

• Specify the types in the tsconfig.json file. The compiler used to enter errors without this entry

   "types": ["jquery", "spectrum"] 

• Add webpack plugin to webpack.common.js

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

• Add import to vendor.ts file

   import 'jquery/dist/jquery.js'; import 'spectrum-colorpicker/spectrum.js'; import 'spectrum-colorpicker/spectrum.css'; 

• Then in your component or directive add the following declaration statement

   declare var $ : JQueryStatic; 

• Code Usage Example

   $("#" + this.fieldId).spectrum({ preferredFormat: "hex3", showInput: true, showPalette: true, palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]], color: this._color, change: this.colorChanged, }); 

It is he. These modifications solve my problem and hopefully help you and save time for others who try to use the jQuery plugin in an Angular2 application.