Bootstrap 4.1.1 导航栏无法使用 Angular 6

Question

我一直在尝试使用 Bootstrap 4.1.1 和 Angular 6 在带有折叠菜单和下拉菜单 link 的导航栏上工作，但不知何故导航栏根本不工作。我可以正确看到元素，但它们没有按预期运行。

我使用 'ng install bootstrap --save' 和 Bootstrap 依赖项通过 Angular CLI 安装了 Bootstrap：'ng install jquery --save' 和 'ng install popper.js --save'

我还在 package.json 和 angular.json

中包含了 Bootstrap、jquery 和 popper.js

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>

我更喜欢使用 Bootstrap 本机库，我宁愿不使用 ng-bootstrap 也不喜欢在 head-tag 中包含 CDN 之类的技巧。

我是不是做错了什么？任何有关如何解决此问题的建议将不胜感激。

Answer 1

只需在脚本中添加 umd 目录 popper。

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

Answer 2

我已经浪费了2个小时追鬼了。请注意 angular.json 中有两个脚本段。一个在 test 下，一个在 build 下。您应该在构建段下添加。我正在测试中添加，所以 angular 没有看到 bootstrap，并且 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"]
          },

Answer 3

popper 的路径应该是：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"
        ]

Answer 4

一段时间后，我只将 bootstrap 库放在 jquery 和 popper 顺序下面...

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

Answer 5

我必须将此添加到 package.json

"dependencies": {
   "core-js": "^2.5.4",
   "jquery": "^3.3.1",
   "popper.js": "^1.14.3",

}
"devDependencies": {    
    "@types/jquery": "^3.3.2",
}

还有这个给angular.json

"architect": {
        "build": {
            "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"

            ]
          },

确保在进行这些更改后运行 npm install。

Bootstrap 4.1.1 导航栏无法使用 Angular 6

Bootstrap 4.1.1 Navbar not working with Angular 6

bootstrap-4

angular6

angular-cli-v6