javascript - Angular 5 + Popper.JS - Stack Overflow

admin管理员组

文章数量:1279234

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 ponent 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.

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 ponent 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.

• javascript
• angular
• twitter-bootstrap
• typescript
• angular5

Share Improve this question Follow edited Feb 19, 2018 at 16:21 Melchia 24.3k2323 gold badges108108 silver badges129129 bronze badges asked Dec 30, 2017 at 22:31 SergeySergey 7,6821414 gold badges4747 silver badges9797 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

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

  npm install [email protected] 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 pilation 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.

本文标签： javascriptAngular 5PopperJSStack Overflow