title: Can't Toggle Navbar in Bootstrap 4 in Angular
body: <p>Why i can't toggle navbar when resizing to mobile screen in angular 4 using bootstrap 4. I included it in the angular cli in script and styles, the node modules from bootstrap. Is there something missing in my code? Please check below. Is there something wrong? Please help</p>
  
  <pre><code>&lt;nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"&gt;
    &lt;a class="navbar-brand" href="#"&gt;Dashboard&lt;/a&gt;
    &lt;button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"&gt;
      &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
    &lt;/button&gt;
  
    &lt;div class="collapse navbar-collapse" id="navbarsExampleDefault"&gt;
      &lt;ul class="navbar-nav mr-auto"&gt;
        &lt;li class="nav-item active"&gt;
          &lt;a class="nav-link" href="#"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;Settings&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;Profile&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;Help&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
      &lt;form class="form-inline mt-2 mt-md-0"&gt;
        &lt;input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"&gt;
        &lt;button class="btn btn-outline-success my-2 my-sm-0" type="submit"&gt;Search&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <blockquote>
    <p>.angular-cli.json</p>
  </blockquote>
  
  <pre><code> "styles": [
      "styles.css",
       "../node_modules/bootstrap/dist/css/bootstrap.min.css"
    ],
    "scripts": [
  
      "../node_modules/popper.js/dist/umd/popper.min.js",
      "../node_modules/jquery/dist/jquery.min.js",
      "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  
    ],
  </code></pre>
  
  <p>package.json</p>
  
  <pre><code>      {
    "name": "dashboard2",
    "version": "0.0.0",
    "license": "MIT",
    "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng build",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
      "@angular/animations": "^4.0.0",
      "@angular/common": "^4.0.0",
      "@angular/compiler": "^4.0.0",
      "@angular/core": "^4.0.0",
      "@angular/forms": "^4.0.0",
      "@angular/http": "^4.0.0",
      "@angular/platform-browser": "^4.0.0",
      "@angular/platform-browser-dynamic": "^4.0.0",
      "@angular/router": "^4.0.0",
      "bootstrap": "^4.0.0-beta",
      "core-js": "^2.4.1",
      "jquery": "^3.2.1",
      "popper.js": "^1.12.5",
      "rxjs": "^5.4.1",
      "zone.js": "^0.8.14"
    },
    "devDependencies": {
      "@angular/cli": "1.2.7",
      "@angular/compiler-cli": "^4.0.0",
      "@angular/language-service": "^4.0.0",
      "@types/jasmine": "~2.5.53",
      "@types/jasminewd2": "~2.0.2",
      "@types/node": "~6.0.60",
      "codelyzer": "~3.0.1",
      "jasmine-core": "~2.6.2",
      "jasmine-spec-reporter": "~4.1.0",
      "karma": "~1.7.0",
      "karma-chrome-launcher": "~2.1.1",
      "karma-cli": "~1.0.1",
      "karma-coverage-istanbul-reporter": "^1.2.1",
      "karma-jasmine": "~1.1.0",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~5.1.2",
      "ts-node": "~3.0.4",
      "tslint": "~5.3.2",
      "typescript": "~2.3.3"
    }
  }
  </code></pre>