jQuery is not defined in bootstrap-sass

Question

I bootstrapped the Angular 2 app using angular-cli. Everything was easy-peasy until I decided to use bootstrap modal. I simply copied the code for opening the modal from our other project that doesn't use angular-cli. I added jquery and bootstrap dependencies to scripts in angular-cli.json file. jQuery is recognised in the project, but when I try to run this.$modalEl.modal(options) inside angular component I get an error that jQuery is not defined.

Actually jQuery is imported into project but as a global $. I've done some digging and apparently bootstrap expects jQuery to be passed into it as a 'jQuery' variable. It doesn't give rat's ass about $.

I could expose jQuery as a variable in webpack.config.js file like we do in other project: (a lot of code omitted for brevity)

var jQueryPlugin = {
  $: 'jquery',
  jquery: 'jquery',
  jQuery: 'jquery'
}

exports.root = root;

exports.plugins = {
  globalLibProvider: new webpack.ProvidePlugin(webpackMerge(jQueryPlugin, {
    svg4everybody: 'svg4everybody/dist/svg4everybody.js'
  }))
}

but angular-cli dev team decided not to let other devs meddle with webpack config files. Thanks guys! Very thoughtful of you.

I've tried importing jQuery directly into Angular component and a bunch of other things mentioned here https://github.com/angular/angular-cli/issues/3202 (adding imports to vendor.ts file and then adding vendor.ts to scripts array in angular-cli.json) but nothing works.

To be honest, I am quite pissed that such a trivial issue like adding jquery dependency to be used with bootstrap in angular-cli is such a minefield.

Have you dealt with similar problem?

Answer 1

Step One

npm install jssha --save [using jssha for this demo]
It it is your own custom file place it in the scripts array of angular-cli.json skip this step 1

Step two

Add the jssha scripts file in .angular-cli.json file
"scripts": [ "../node_modules/jssha/src/sha.js" ]
Step three Adding a var in component to be used as a global variable

//using external js modules in Angular Component
declare var jsSHA: any; // place this above the component decorator
shaObj:any;
hash:string;
this.shaObj = new jsSHA("SHA-512", "TEXT");
this.shaObj.update("This is a Test");
this.hash = this.shaObj.getHash("HEX")

Take a look @ this link. It has a working example and a question for the same with typings and without it. I have used bootstrap and jquery with Angular in that project, you can check the repo too.

In your case you need to add the jquery files

like this in your angular-cli.json

  "styles": [
    "../node_modules/bootstrap-v4-dev/dist/css/bootstrap.min.css",
    "styles.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.min.js",
    "../node_modules/bootstrap-v4-dev/dist/js/bootstrap.min.js"

and then declare in component.declare var $: any;

This should work.

UPDATE

I went on to create a modal of bootstrap using just jquery in Angular using the steps i mentioned.

It works Check this gh page link - LINK.

and if you want to check the source code for the same check LINK.

The answer i posted came from this link this is my page on Angular LINK

Answer 2

I haven't specifically used Bootstrap with Angular 2, but I have with Angular 1 and the situation is the same in that the regular version of Bootstrap is designed to work with jQuery and is not built with Angular in mind. You can of course install jQuery but the Javascript may not work as expected in the context of Angular.

The easiest solution is to use a version that is built with Angular in mind, and I believe ng-bootstrap is the most prominent of these. I haven't used it myself, but I have used angular-ui-bootstrap for Angular 1 and this appears to be an Angular 2 counterpart to the same project.

Alternatively, you can wrap it in a directive yourself, but I would avoid doing so if you can get ng-bootstrap to do what you want since it will be much more work.