Load bootstrap and jquery libraries from angular-cli.json

Question

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

I have added the styles and scripts in .angular-cli.json Everything is working fine.

I'm using some Jquery related code in index.html and I'm facing the below exception

Uncaught ReferenceError: $ is not defined
at (index):95

If I load the files using .angular-cli.json will it not reflect in my index.html?

Stackblitz example

I'm using animation.css and animation.js. Is it possible to load in .angular-cli.json file

AOS.init({
    easing: 'ease-in-out-sine',
    once:'true'
});

if you want to use it in a component, then you should declare outside the component class — Anto Antony
– Anto Antony, Commented Jun 1, 2018 at 10:55

David · Accepted Answer · 2018-06-01 12:33:12Z

1

If you add your jQuery script in .angular-cli.json, it'll be bundled and added just before the closing body tag, so probably just after your code. So when execution flow reaches your code, $ is not defined yet.

What you can do it using the windonw.onload event to execute jQuery code after all js files have been loaded

<body>
  <app-root></app-root>
</body>

<script>

  window.onload = function(){
    $('#abc').html('hello');
    }
</script>
</html>

I did not manage to get this to work on stackblitz, probably because of the way they load scripts. But it does work on a normal project

Note: You should not use jQuery in angular projects if you don't absolutely need it. If you just require it for bootstrap, then have a look at the ng-bootstrap library, which offers a angular-native implementation of bootstrap

edited Jun 1, 2018 at 12:33

answered Jun 1, 2018 at 12:25

David

34.6k13 gold badges90 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Krishna Over a year ago

I'm using ngx-bootstrap library for components. JQuery is used for some animations.

David Over a year ago

Ok, I got confused because you are importing node_modules/bootstrap/dist/js/bootstrap.min.js

Krishna Over a year ago

Thanks anyway!! I'm using AOS animation. Can I include that from node_modules. Can u pls check my edited question.

Ryan Joy C · Accepted Answer · 2018-06-01 10:58:05Z

0

Inside your component.ts just declare as below

// Jquery declaration
declare var $: any;

@Component({
  selector: 'abc',
  templateUrl: './abc.html',
  styleUrls: ['./abc.scss']
})
export class ABCComponent implements OnInit{
}

answered Jun 1, 2018 at 10:58

Ryan Joy C

1054 bronze badges

1 Comment

Krishna Over a year ago

Sorry. Not in the component. I need it in index.html

Abderrahim Soubai-Elidrisi · Accepted Answer · 2018-06-01 12:02:13Z

0

Install

npm i --save jquery

Declare

import {$,jQuery} from 'jquery';
window.$ = $;
window.jQuery = jQuery;

answered Jun 1, 2018 at 12:02

Abderrahim Soubai-Elidrisi

5,2621 gold badge31 silver badges41 bronze badges

1 Comment

Krishna Over a year ago

Where to add that

Collectives™ on Stack Overflow

Load bootstrap and jquery libraries from angular-cli.json

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related