CODEWITHSUNDEEP
javascriptjqueryangulartypescript
Terrance Jackson
Terrance Jackson

Reputation: 1079

Angular getting (...)tooltip is not a function with Jquery

I am trying to incorporate Jquery inside my Angular 8 project using

var $ = require('jquery');

However when I call this method

$(MyControl).tooltip({'title': data.text, html:true});

I get a TypeError: $(...).tooltip is not a function

My angular.json scripts section looks exactly like this so jquery is declared before the other two

"scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/@popperjs/core/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"             
            ],

What is causing this error?

UPDATE Ok this is just wierd So putting these js files under the styles header in my angular.json it works

 "styles": [                       
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "src/styles.css"
            ],

Placing them under the scripts section it doesnt work, removing them completely from the angular.json and they dont work.

Only two places does it work and that is directly in the index.html as CDN or in the styles section.

Is there any rhyme or reason on why this works under styles and not scripts?

Upvotes: 0

Views: 1190

Answers (1)

amanpurohit
amanpurohit

Reputation: 1296

Declare a variable called jQuery or $ in the angular component where you want to use jQuery plugin.

declare var $: any;

OR

declare var jQuery: any;

The declare keyword is used for ambient declarations where you want to define a variable that may not have originated from a TypeScript file.

Upvotes: 2

Related Questions