4

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();
});
Improve this question
5
  • 1
    You can make your life easier by using an Angular implementation of Bootstrap, like ng-bootstrap. Commented Jan 28, 2019 at 17:16
  • 1
    Can you clarify why you are attempting to use Bootstrap JS + jQuery (and related modules) with Angular instead of using components/directive/modules from a library such as ng-bootstrap that's specifically designed/developed to work with Angular lifecycle/rendering? You will experience a variety of issues attempting to use raw Bootstrap/jQuery as rendering works pretty differently in frameworks like Angular. Commented Jan 28, 2019 at 17:16
  • 2
    ng-bootstrap and ngx-bootstrap don't have toasts, which I need in another part of my app, that's why I went with vanilla Bootstrap JS + jQuery. I'm adding this to the question. Commented Jan 28, 2019 at 17:18
  • Let us continue this discussion in chat. Commented Jan 28, 2019 at 18:42
  • 1
    edited question to mention import 'bootstrap'; Commented Jan 28, 2019 at 18:53

2 Answers 2

Reset to default
2

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

I am using latest version of angular-cli.

First of all, download my Github project and in cmd run npm install (so all dependency is added to your system) and after run ng-serve, this will Navigate to http://localhost:4200/.

if you done that, your problem is solved.

if you want to use jquery-syntex in your project.

type this commands in cmd

npm install jquery --save 
npm install @types/jquery --save

and add this syntax in your app.component.ts

import $ from 'jquery';

2nd Question

use ngx-bootstrap, if you want to use tooltip on your device.

Improve this answer

9 Comments

This doesn't solve my issue. Without the import 'bootstrap' call somewhere in the code, the compiler complains about .tooltip() not being a function
you can use ngx-bootstrap for that
by the way you are asking different question, so if you like my answer, don't forgot to consider up-vote and check my answer as best answer for you by clicking on right arrow, thanks!
Wouldn't mixing a library like ng-bootstrap and vanilla bootstrap CSS/JS break everything ? I don't feel like asking two different questions : I want to use vanilla bootstrap with angular, however I'm running into some issues with combining tooltips and dropdowns.
If you are at beginner state in your project, change into ng-bootstrap. I ask same question about dropdown in SO, you are saw that in my profile
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.