Jquery.widget not found in angular +webpack app

Question

I have a jhipster generated gateway app. I have jquery plugin added to in webpack.dev.js

There is one scripts.js which stays in assets folder , I have included that script by adding its entry in vendor.ts. and now I can see that its in bundled in main.bundle.js

The content of that script is :

jQuery.widget.bridge('uibutton', jQuery.ui.button);

//receive calls from typescript code to update the layouts
var AdminLTE = (function() {
 return {
    init: function() {
        jQuery(function(){
            jQuery.AdminLTE.layout.activate();
            jQuery.AdminLTE.layout.fix();
            jQuery.AdminLTE.layout.fixSidebar();
      });
   }
  }
})(AdminLTE||{});

and in my component.ts, I have code like this :

declare var AdminLTE: any;

export class AdminDashboard1Component implements OnInit {
------------
  ngOnInit() {
     // Update the AdminLTE layouts 
    AdminLTE.init();
----------
}

When I load the app, the breakpoints gets hit at line 1 of scripts.js and complaints

Cannot read property 'bridge' of undefined

where our jQuery works at other places in the app.

If I comment this line, and let the app go ahead, it halts at AdminLTE.init() in component.ts, where it complains

variable AdminLTE not found.

Answer 1

This is not an answer but more of a suggestion and hint on how this should be done properly in any webpack based setup(not just with JHipster)

I have used AdminLTE in the past btw.

In a webpack based workflow similar to the one JHipster provides(it's not special it's quite similar to what most tools like Angular CLI etc provide) you need to keep few things in mind when trying to use external libraries

1. The configuration is geared to work with a package manager like NPM so when you add something via NPM it mostly works out of the box and in some rare cases you might have to configure a rule to say expose a global variable etc, like the JQuery one for example)

2. If you add scripts in assets etc, you need to import it properly and setup rules to process those properly, by default webpack wouldn't expect scripts in assets, scripts should be under the configured script root

In the JHipster setup, we support JQuery as there might be rare cases when it is needed but it is generally not a good idea to mix Angular and Jquery together as you will be asking for glitches and trouble as both will try to manage DOM. In your case, you are expecting AdminLTE plugin to be loaded when you run your app but webpack doesn't know of those plugins as you haven't setup a way for webpack to load them and you haven't imported them probably as well. But then I wouldnt know for sure as you dont give enough info on what exactly you are doing.

So the proper way to do this would be to install adminLTE using npm install admin-lte --save and then add your scripts in the webapp/app folder and import them appropriately. you might or might not have to tewak webpack loader to load adminLTE after jquery

Ideally you should be asking AdminLTE people on how to use it with Angular

Answer 2

Thanks for the suggestions,

1. I have added adminLTE using npm install admin-lte --save. which is stander-ed way of installing any npm module to your exsting angular app. which Jhipster is. It has angular.cli json and its existance is also explained on jhipster site.

2. About jquery,I understand that there would be glitches. I have noticed the

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

   and on similar notes to use raphael .I have added new rule: webpack.ProvidePlugin({ Raphael: 'raphael' }), And it works. also added alias for morris.js

   alias: {   'morris.js': 'morris.js/morris.js}
   

   so have understood how to overcome some obstacle.

3. For the dependencies which are installed when done npm install, libs are downloaded/saved under node_modules folder. and for all of them work with just a simple import statement in your component.ts. ex: import 'daterangepicker'

4. There is one js included in angular-cli.json of adminLTE,which was not part of any node_module & that is scripts.js as mentioned in original question. I tried to include it using import and also by adding to CopyWebpackPlugin and also by adding it to vendor.ts. Even though the script was loading,(I could see in browser debugger, and I could hit a breakpoint) it was complaining for jQuery.

5. My take was, daterangePicker is working but scripts.js is not probably because Jquery was loaded before daterangepicker but after scripts.js

6. So, I removed all the imports from my component.ts like import 'daterangepicker' & import 'jqueryui'; and added them in vendor.ts exactly as the order in angular-cli.json of the original adminLTE sample app. including 'import ../../../../node_modules/...path to jquery.js in dist' and it works!! Jquery.widget.bridge now returns the correct function reference when watched in browser debugger.

So, my question: is there any order in which js included in vendor.ts and webpack build chain?

Answer 3

Oh!! the Very first line of the very first file app.module.ts import ./vendor.ts

explains everything..