为什么将引导程序添加到角度无法正常工作？节点JS答案

【问题标题】：Why is adding bootstrap to angular not working correctly? NodeJS为什么将引导程序添加到角度无法正常工作？节点JS
【发布时间】：2021-10-12 13:20:42
【问题描述】：

我是 Angular 的初学者。我正在尝试在我的第一个项目中添加引导程序，但它没有出现在开发人员工具的头部下方。这是我的 angularjson 代码。提前致谢。

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/my-first-project",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.css",
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/bootstrap/dist/js/bootstrap.js"
            ]

【问题讨论】：

因为它被缩小并编译到 scripts.js 和 styles.js 包中
从脚本中删除它仍然无法正常工作
即使您没有在头部明确看到它，它也能正常工作

标签： javascript node.js angular bootstrap-4 frontend

【解决方案1】：

在 Angular 中使用引导程序的步骤。

安装引导程序
- npm install bootstrap --save
在 angular.json 文件中
- 在样式数组下导入bootstrap.min.css
  - "node_modules/bootstrap/dist/css/bootstrap.min.css"
- 在 scripts array 下导入 bootstrap.bundle.min.js 文件，因为 popper.js 包含在 bootstrap.bundle.js 文件中。如果你只导入 bootstrap.js 那么你必须在 bootstrap.js 之前导入 popper.js 以获取更多信息check Bootstrap Docs
  - "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"

【讨论】：