JQuery not defined in bootstrap-sass

Question

I downloaded the Angular 2 application using angular-cli. Everything was easy, but I decided to use bootstrap modal. I just copied the code to open the modal from our other project that does not use angular-cli. I added jquery and bootstrap dependencies to the scripts in the angular-cli.json file. jQuery is recognized in the project, but when I try to run this.$modalEl.modal(options) inside the Angular component, I get the jQuery is not defined error message.

In fact, jQuery is imported into the project, but as a global $ . I did some digging and apparently bootstrap expects jQuery to be passed to it as a jQuery variable. He does not give a rat ass about $ .

I could expose jQuery as a variable in the webpack.config.js file, as in another 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 the angular-cli development team decided not to let other developers interfere with the webpack configuration files. Thank you, guys! I thought about you very much.

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

Honestly, I'm very angry that such a trivial problem as adding a jQuery dependency that will be used with bootstrap in angular-cli is such a minefield.

Have you had problems with a 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 

Second step

 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") 

Check out the @this link . It has a working example and a question for the same with and without type. I used bootstrap and jquery with Angular in this project, you can also check repo.

In your case you need to add jquery files

as in 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 the component. declare var $: any;

That should work.

UPDATE

I started creating a modal bootstrap using only jquery in Angular using the steps described above.

Works Check the link to the gh - LINK page.

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

The answer I wrote came by this link, this is my page on Angular LINK

Answer 2

I did not use Bootstrap with Angular 2, but I have with Angular 1, and the situation is the same as the regular Bootstrap version, designed to work with jQuery and not built using Angular in mind. You can, of course, install jQuery, but Javascript may not work as expected in the context of Angular.

The simplest solution is to use a version built using Angular, and I believe that ng-bootstrap is the most prominent of them. I did not use it myself, but I used angular -ui-bootstrap for Angular 1, and it looks like an Angular 2 analogue of the same project.

Alternatively, you can wrap it in a directive yourself , but I wouldn’t do it if you can get ng-bootstrap to do what you want, since that will be a lot more work.

Answer 3

You can use the ng eject command to have the Angular CLI generate the webpack.config file.

Then output jQuery as a variable, as you did before.