jQuery is not defined in bootstrap-sass

by

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

More Related Contents:

  1. How to use jQuery with Angular?
  2. How to bundle an Angular app for production
  3. How to use jQuery Plugin with Angular 4?
  4. How to add font-awesome to Angular 2 + CLI project
  5. How to decrease prod bundle size?
  6. Load new modules dynamically in run-time with Angular CLI & Angular 5
  7. angular-cli where is webpack.config.js file – new angular6 does not support ng eject
  8. How to use a jQuery plugin inside Vue
  9. How to undo Angular 2 Cli ng-eject?
  10. How to run a jquery function in Angular 2 after every component finish loading
  11. Avoiding relative paths in Angular CLI
  12. Angular4 can’t find Jquery-UI functions
  13. Using Angular CLI and unable to use relative image paths in CSS files
  14. How to navigate/focus to the next item in Angular2?
  15. Webpack using bootstrap – jquery is not defined
  16. Slide down button to show text HTML CSS
  17. CORS issue – No ‘Access-Control-Allow-Origin’ header is present on the requested resource
  18. jQuery: outer html() [duplicate]
  19. Queue ajax requests using jQuery.queue()
  20. Bootstrap 3 Collapse show state with Chevron icon
  21. jQuery UI Autocomplete widget search configuration
  22. Accessing clicked element in angularjs
  23. Setting equal heights for div’s with jQuery
  24. onHide() type event in jQuery
  25. how to test Recaptcha with jQuery Validate plugin
  26. How to add data via $.ajax ( serialize() + extra data ) like this
  27. jQuery Validation – Two fields, only required to fill in one
  28. sum all values for table column based on class
  29. jquery resize listener on a div
  30. How to enforce a “smooth scrolling” rule for mousewheel, jQuery?

Leave a Comment