How to properly use JQuery and Bootstrap in latest Angular versions

0
votes

Yes, this question may be repeated. But I just don't get this setup working in any way.

I tried prettty much everything:

  • Getting the libraries directly into the index.html through a CDN.
  • Installing them via NPM and then adding them to angular-cli.json script field.
  • Importing the modules directly into my components, both with aliased JQuery (import * as $ from 'jquery') and just plain import (import 'jquery').

I tried other setups, like doing the imports in the root component, importing these libraries in various locations... but I don't get this working.

Currently, I need to get working one Bootstrap modal, and one Datepicker component which also works with JQuery, but it's being impossible for me. Sometimes I get the '$ is undefined' and sometimes I get other errors.

So now, I will ask: which is the real solution for this problem in latest Angular versions? How should I make the imports?

Thank you!

EDIT: Current situation:

  • Added the dependencies to the angular-cli.json file:

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

    • I try to call the .modal() function that bootstrap has to add to Jquery:

    ( $('#myModal')).modal({ backdrop: true, focus: true, show: true })

But it just throws...:

SegmentsComponent.html:15 ERROR ReferenceError: $ is not defined
    at SegmentsComponent.openModal (segments.component.ts:55)
    at Object.eval [as handleEvent] (SegmentsComponent.html:15)
    at handleEvent (core.js:13255)
    at callWithDebugContext (core.js:14740)
    at Object.debugHandleEvent [as handleEvent] (core.js:14327)
    at dispatchEvent (core.js:9704)
    at eval (core.js:10318)
    at HTMLAnchorElement.eval (platform-browser.js:2614)
    at ZoneDelegate.invokeTask (zone.js:425)
    at Object.onInvokeTask (core.js:4620)

Any help?

3
javascriptjquerytwitter-bootstrapangular

3 Answers

0
votes

mmmmm .. it looks very strange .. the only reason why it can gives to you $ is not defined is because you DON'T INCLUDE IT well..

so what i can suggest to you is to DOUBLE check your jquery path in the scripts :[] section ..

REMEMBER .. the path is intended from the src(or your root: entry) folder!

ALSO check the jquery version .. I saw that NPM don't include jquery when you do install bootstrap ... so install jquery manually and get the right version ..

AND in your .ts file .. have you declare var $ : any in the head of your ts file? ...

Hope it helps you!

0
votes

You need to install Jquery and bootstrap (popper for Bootstrap 4) with package managers or CDN. Your .angular-cli.json file must look like this:

"scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/popper.js/dist/umd/popper.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
],

Make sure these three files exist.

0
votes

I found the answer, it can be solved by two methods one is included js file in index.html or ou can include like this, also you can include js as well as jquery.

ngOnInit() {
$(document).ready(function () {
  $.getScript('../../assets/frontend/js/app.js', function (w) { });
}); }