jQuery is not defined in bootstrap-sass

我的梦境 提交于 2019-11-26 16:47:37

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

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.

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

Then expose jQuery as a variable as you've done before.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!