Bootstrap 4.1.1 Navbar not working with Angular 6

bootstrap navbar toggle not working angular
angular bootstrap 4 navbar toggle not working
collapse navbar-collapse not working angular
angular bootstrap navbar
bootstrap toggle not working angular
bootstrap navbar not working angular 4
navbar toggle angular 6
data-toggle not working in angular

I have been trying to work on Navbar with collapse menu and dropdown link using Bootstrap 4.1.1 and Angular 6 but somehow Navbar is not working at all. I can see elements correctly but they don't function as intended.

I installed Bootstrap via Angular CLI using 'ng install bootstrap --save' and Bootstrap dependencies: 'ng install jquery --save' and 'ng install popper.js --save'

I also included Bootstrap, jquery and popper.js in package.json and angular.json

package.json:

"dependencies": {
  "@angular/animations": "^6.0.0",
  "@angular/common": "^6.0.0",
  "@angular/compiler": "^6.0.0",
  "@angular/core": "^6.0.0",
  "@angular/forms": "^6.0.0",
  "@angular/http": "^6.0.0",
  "@angular/platform-browser": "^6.0.0",
  "@angular/platform-browser-dynamic": "^6.0.0",
  "@angular/router": "^6.0.0",
  "bootstrap": "^4.1.1",
  "core-js": "^2.5.4",
  "jquery": "^3.3.1",
  "popper.js": "^1.14.3",
  "rxjs": "^6.0.0",
  "zone.js": "^0.8.26"
},
"devDependencies": {
  "@angular-devkit/build-angular": "~0.6.0",
  "@angular/cli": "~6.0.0",
  "@angular/compiler-cli": "^6.0.0",
  "@angular/language-service": "^6.0.0",
  "@types/jasmine": "~2.8.6",
  "@types/jasminewd2": "~2.0.3",
  "@types/jquery": "^3.3.2",
  "@types/node": "~8.9.4",
  "codelyzer": "~4.2.1",
  "jasmine-core": "~2.99.1",
  "jasmine-spec-reporter": "~4.2.1",
  "karma": "~1.7.1",
  "karma-chrome-launcher": "~2.2.0",
  "karma-coverage-istanbul-reporter": "~1.4.2",
  "karma-jasmine": "~1.1.1",
  "karma-jasmine-html-reporter": "^0.2.2",
  "protractor": "~5.3.0",
  "ts-node": "~5.0.1",
  "tslint": "~5.9.1",
  "typescript": "~2.7.2"
}

angular.json:

        "styles": [
          "./node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.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"
        ]

html:

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a href="#" class="navbar-brand">RecipeBook</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsing-nav-bar" aria-controls="collapsing-nav-bar"
        aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsing-nav-bar">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a href="#" class="nav-link">Recipes</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Shopping list</a>
            </li>
        </ul>
        <ul class="navbar-nav">
            <li class="nav-item dropdown">
                <a href="#" class="nav-link dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" 
                aria-haspopup="true" aria-expanded="false">
                    Manage
                </a>
                <div class="dropdown-menu" aria-labelledby="dropdownMenu">
                    <a href="#" class="dropdown-item">Save</a>
                    <a href="#" class="dropdown-item">Fetch</a>
                </div>
            </li>
        </ul>
    </div>
</nav>

I prefer using Bootstrap native library and I rather not use ng-bootstrap nor hacks like including CDNs in head-tag.

Am I doing something wrong here ? Any advice on how to solve this would be appreciated.

just add umd directries popper in script.

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

css - Bootstrap not working properly in Angular 6, @angular/cli: 1.0.0-rc.2 node: 7.7.3 os: win32 x64 I am using bootstrap 4 alpha 6, with Sass but when I follow the http://v4-alpha.getbootstrap.com/components​/navbar/ first example, the toggle button does not work. Navbar drop-down menu not working with Angular and Bootstrap 4. Ask Question Asked 2 years, Bootstrap NavBar with left, center or right aligned items. 6.

I have lost 2 hours chasing ghosts. Notice that there is two scripts segment in angular.json. One under test and one under build. You should add under build segment. I was adding under test so angular didn't see bootstrap, and popper js

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/myBootstrapTestApp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.js"]
          },

Question: use Bootstrap 4, navbar toggle does not work following , I'm facing the same problem with angular-cli: 1.0.0-beta.21, node 7.2.1 and 4.0.0-​alpha.6. Bootstrap content is included in the generated styles. ng-bootstrap not working in angular 4. For Angular 6 and higher you can use this solution. Change navbar color in Twitter Bootstrap. 958.

path to popper should be : node_modules/popper.js/dist/umd/

        "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.css"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/popper.js/dist/umd/popper.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]

Bootstrap styles not loading · Issue #3411 · angular/angular-cli , Styling An Angular 10 Example App with Bootstrap 4 Navbar, Jumbotron, a Bootstrap 4 Jumbotron; Step 6 -- Creating an Angular Bootstrap 4  I am updating a project to Bootstrap 4 alpha 6 using the ng2-bootstrap 1.3.0 but the dropdowns do not seem to be working correctly. I created a new project using angular-cli as instructed in your getting started doc and imported ng2-bootstrap and bootstrap@4.0.0-apha.6. The package.json is then

Styling An Angular 10 Example App with Bootstrap 4 Navbar , Of course, I want the fixed navbar to collapse and be toggle-able on smaller screens. I did link the bootstrap css and js files as well as jQuery in the relevant sections of my codepen. silentarrowz July 2, 2016, 8:30pm #6 Tutorial CSS Example React Example Angular Tutorial Bootstrap Example How to Set Up SSH​  Angular 6 is the newest version of Angular. A combination of both will make an application fast, visually appealing and modern. In this post, we’ll see how to add bootstrap 4 to Angular 6 or Angular 7 application with some examples. Add Bootstrap 4 to Angular 6 or Angular 7 application

SOLVED: My Bootstrap Navbar Toggle is Not Toggling!, I have no clue as I'm not using the bootstrap provided JS. I would just drop the whole `href="#"` attribute, as it doesn't make sense. You are probably right that  Learn Angular Framework Version 6 with step by step tutorial. This is the quick start guide where you can learn from zero to intermediate level of Angular Framework. We tech you everything in

Angular 6 and bootstrap 4 navbar dropdown not working, In this article, we will learn how to set up Angular 7 and create a responsive No unread notification. loading. This step won't take too much time as I have described how to set up Angular 6, in my previous session. Now Then, type the below command to check if Angular CLI is correctly installed or not. I can confirm that this issue is because of bootstrap 4. I am using angular 6 and was trying to include bootstrap v4 it wasn't showing up and then I downgraded to bootstrap v3 and it works like a charm. Simply use the command npm install bootstrap@3 --save to downgrade to bootstrap v3

Comments
  • to include bootstrap, you should include/import the bootstrap css file in your styles.css file, not the styles array property in your angular.json
  • Hey, thanks for your advice I was able to some extent repair it. Just changing popper.js url I got Navbar's dropdown working. I didn't think distribution folder could affect outcome so much. Thank you
  • I have the same issue but my popper.min.js is correct. It is under umd. I noticed though that it works when app is build and run in a server (http-server) but not if during dev mode (ng serve).
  • Amazing! This had me knocking my head against a wall. Thank you!