Bootstrap: Dropdown not working with Bootstrap 4 beta 3 in Angular production app.

[ernitishkumar]

Issue description
My dropdown in Navbar is not working with beta 3 build. Earlier it was working with beta 2 in both development mode and production mode.
But after upgrading to Bootstrap beta 3 dropdown has stopped working in production build of Angular 5 but continues to work in development mode.

Every time when I click on my dropdown in production build it get following error in the console.
Uncaught TypeError: n[t] is not a function

As per bootstraps website I have already included popper.min.js before bootstrap.min.js in my angular-cli.json file.

Is there something I am missing or its really a bug in beta 03 ??

[kukac7]

use this:

https://ng-bootstrap.github.io/

https://github.com/ng-bootstrap/ng-bootstrap

[ernitishkumar]

That is not a solution. Looking for a reason instead.

[kukac7]

@ernitishkumar that is the solution.
why would you want to get any other js directory for angular?
use it, it's perfectly good for angular.

[Johann-S]

Dropdown in navbar do not use Popper.js (in beta 3) so I'm not sure if your error is related to us

[mdo]

If you can reduce it down to a live demo of Bootstrap's code, we'll happily re-open to investigate and fix. Closing out though as there's nothing specific for us to act on here.

[ernitishkumar]

So you saying I cannot use bootstrap 4 native dropdown in navbar ? and I should be using third party dropdown solution for bootstrap dropdown functionality

[Johann-S]

You can but we cannot help you without a live demo of your issue

[patrickhlauke]

no, we're saying: the problem doesn't appear to be with bootstrap, but with angular / the way you're integrating it.

[lpalli]

Same problem on boostrap 4.0.0
@ernitishkumar: Do you find a solution?

[aashish-ak]

The following is my html dropdown code i'm using from bootswatch template , I'm using Angular 6, when i click on dropdown arrow, nothing happens, no error in console, please help.

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
            <h1 class="btn btn-primary">Categories</h1>
            <div class="btn-group" role="group">
                <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="false"></button>
                <div class="dropdown-menu" aria-labelledby="btnGroupDrop1" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 37px, 0px); top: 0px; left: 0px; will-change: transform;">
                    <a class="dropdown-item" href="#">Success Stories</a>
                    <a class="dropdown-item" href="#">Problems</a>
                    <a class="dropdown-item" href="#">Recruitment</a>
                    <a class="dropdown-item" href="#">Jobs</a>
                    <a class="dropdown-item" href="#">Internships</a>
                    <a class="dropdown-item" href="#">Technology</a>
                    <a class="dropdown-item" href="#">Personality Development</a>
                    <a class="dropdown-item" href="#">Interview</a>
                    <a class="dropdown-item" href="#">Upcoming Trends</a>
                </div>
            </div>
        </div>

[kukac7]

@aashish-ak here is the solution.
doc: https://ng-bootstrap.github.io/#/components/dropdown/examples

[amrendra4it]

try using below path for popper

"./node_modules/popper.js/dist/umd/popper.js",

[MCreationz]

I am using simple bootstrap with angular when i run project on localhost it properly execute the toogle navbar button shows the list when responsive view is opened . but when i run this project on live server it does not execute please help me to get out of this . i had make project live through git .
can you plz help me how can i make it run on live server..........

[gwasky]

Was this ever resolved ? I am having the same issue

[Aihabam]

I have the same issue

[Johann-S]

If someone face this issue please create a new issue with a live example of your issue on Stackblitz thanks 👍

Some hints which can help you:

• Use the latest release of Bootstrap 4 (at this time v4.3.1)
• Use bootstrap.bundle.min.js or be sure you have Popper.js in your dependencies