Debug console showing "tooltip not defined"

I am using PrimeNG and Bootstrap 4 for an Angular2 application. Although the PrimeNG tooltip component works well, the debug console always shows this log:

Uncaught ReferenceError: Tooltip is not defined
at Popover (eval at module.exports (addScript.js:9), <anonymous>:3524:32)
at eval (eval at module.exports (addScript.js:9), <anonymous>:3677:3)
at eval (<anonymous>)
at module.exports (addScript.js:9)
at Object.541 (bootstrap.js?41b4:1)
at __webpack_require__ (bootstrap a7ab881:52)
at Object.1272 (scripts.bundle.js:8)
at __webpack_require__ (bootstrap a7ab881:52)
at webpackJsonpCallback (bootstrap a7ab881:23)
at scripts.bundle.js:1

I tried to comment out part of PrimeNG, but the error still exists. Has anyone seen this before?

My angular-cli.json part:

"styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "../node_modules/primeng/resources/primeng.min.css",
    "../node_modules/primeng/resources/themes/bootstrap/theme.css",
    "styles.css"
],
"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/tether/dist/js/tether.js",
  "../node_modules/bootstrap/dist/js/bootstrap.js"
],

And the only place I used the tooltip is

import { TooltipModule } from 'primeng/primeng';

<a class="list-item-lockup"
   routerLink="{{item.path}}"
   [pTooltip]="isSideBarCollapsed ? item.data.title : null">
  <i class="fa {{item.data.icon}} fa-fw" aria-hidden="true"></i>
  <span [class.list-span-collapsed]="isSideBarCollapsed">{{item.data.title}}</span>
</a>

UPDATE

The problem arises from bootstrap.js', after removing "../node_modules/bootstrap/dist/js/bootstrap.js" there should be no error. Why's that?

+4
source share

Source: https://habr.com/ru/post/1664029/


All Articles