Bootstrap 4 dropdown breaks when importing bootstrap in Angular 7

Question

I'm having this issue in an Angular 7 app. I was not able to reproduce it with pure Bootstrap CSS/JS and Popper.js.

I'm trying to use vanilla Bootstrap JS and jQuery because I need Bootstrap's toasts and the other libs (ng-bootstrap and ngx-bootstrap) don't support toasts for the moment.

Minimal (non) working example

https://github.com/Crocmagnon/angular-bootstrap4-dropdown-issue

Run it with npm run start

Link to issue in Popper.js repo

I tried to ask the developer but he's clueless : https://github.com/FezVrasta/popper.js/issues/748

Steps to reproduce the problem

To reproduce with the example :

npm i -g @angular/cli
git clone https://github.com/Crocmagnon/angular-bootstrap4-dropdown-issue.git
cd angular-bootstrap4-dropdown-issue
npm i
ng serve

To reproduce from scratch :

1. Create an angular app with ng-cli
2. Install bootstrap and bootstrap types:
   • npm install --save bootstrap @types/bootstrap.
   • @types/bootstrap requires popper.js as a dependency.
3. Include Bootstrap 4 CSS and JS files
4. Include Popper JS UMD file
5. Add import 'bootstrap'; somewhere to tell typescript that the jQuery .tooltip() function exists
6. Try to use Bootstrap 4 dropdown in navbar

Relevant excerpt from angular.json :

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "node_modules/@fortawesome/fontawesome-free/css/all.css",
  "src/styles.scss"
],
"scripts": [
  "node_modules/jquery/dist/jquery.slim.js",
  "node_modules/popper.js/dist/umd/popper.js",
  "node_modules/bootstrap/js/dist/util.js",
  "node_modules/bootstrap/js/dist/alert.js",
  "node_modules/bootstrap/js/dist/button.js",
  "node_modules/bootstrap/js/dist/carousel.js",
  "node_modules/bootstrap/js/dist/collapse.js",
  "node_modules/bootstrap/js/dist/dropdown.js",
  "node_modules/bootstrap/js/dist/modal.js",
  "node_modules/bootstrap/js/dist/scrollspy.js",
  "node_modules/bootstrap/js/dist/tab.js",
  "node_modules/bootstrap/js/dist/toast.js",
  "node_modules/bootstrap/js/dist/tooltip.js",
  "node_modules/bootstrap/js/dist/popover.js"
]

What is the expected behavior?

The dropdown should toggle

What went wrong?

The dropdown doesn't toggle at all

Comments

I tried to include Popper ESM files in my angular.json file. Everything now works fine, except that I get an error in the console.

Uncaught SyntaxError: Unexpected token export

Do I miss something here ?

Edit

It seems that this statement in main.ts breaks the dropdown :

import 'bootstrap';

However, if I remove it, Typescript screams when I want to do some Bootstrap jQuery like displaying toasts or tooltips :

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

Answer 1

The issue you're having here is because of the typescript compiler. To circumvent that, you could initialize the tooltips and other elements in a basic JS file. You will need to import this file so create it either in the assets folder (and link it in your index.html) or in another location and mention it in the scripts part of your angular.json.

To initialize tooltips, the content of this JS file would be :

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

This would initialize all tooltips when the document gets ready.

If you want to do that at a specific moment in the Angular flow, wrap the call in a function like so :

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

To call it in a Typescript file, you'll need to first declare the function. For example, to initialize the tooltips in ngOnInit() :

declare function tooltip();
ngOnInit() {
  tooltip();
}

This way you won't need to import 'bootstrap'; anywhere and so you won't break your other components.