Angular 5 + Popper.JS

Question

I'm trying to launch training project that requires Popper.Js in its features. However, it doesn't seem to let me just start to use Popper.Js.

According to Bootstrap's docs I start Popper.Js by

$(function () {
  $('[data-toggle="tooltip"]').tooltip();
});

I use it in main component in ngOnInit . However, it doesn't work. The error occurs " Property 'tooltip' does not exist on type 'JQuery' ". I imported jquery and bootstrap bundle file. Types for all the libraries are installed.

I also tried the pure "popper.js" instead of bootstrap.bundle.js. But the same error occurs. Bootstrap.bundle.js(includes bootstrap and popper.js in right order) and jquery are imported in angular-cli.json.

Answer 1

Run the following command to install bootstrap jquery & popper.js:

  npm install bootstrap@4.0.0-beta.2 popper.js jquery --save

In angular-cli.json add these lines:

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

In your page.ts Add:

declare var $;

Edit:

Not all JavaScript libraries/frameworks have TypeScript declaration files. On the other hand, we might want to use libraries/frameworks in our TypeScript files without getting compilation errors. One solution is to use the declare keyword. The declare keyword is used for ambient declarations where you want to define a variable that may not have originated from a TypeScript file.