Bootstrap angular 项目中的 5 个通过 angular.json 文件

Question

我使用 cli

构建了一个新的 angular 项目

ng new memmory-game

我想使用 bootstrap 并且因为我知道 bootstrap 5 已经删除了 jQuery 依赖项，所以我选择不使用 ng-bootstrap

通过 npm 和 popperjs 安装 bootstrap

这是我的 package.json 文件，因此您可以看到我的依赖项。

  "dependencies": {
    "@angular/animations": "~13.3.0",
    "@angular/common": "~13.3.0",
    "@angular/compiler": "~13.3.0",
    "@angular/core": "~13.3.0",
    "@angular/forms": "~13.3.0",
    "@angular/platform-browser": "~13.3.0",
    "@angular/platform-browser-dynamic": "~13.3.0",
    "@angular/router": "~13.3.0",
    "@popperjs/core": "^2.11.5",
    "bootstrap": "^5.1.3",
    "popper.js": "^1.16.1",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },

你可以看到我实际上安装了 popper.js 和 popperjs/core 因为我不确定我需要哪一个。

在 app.component.html 我放了一些 bootstrap 组件。

没有样式，看起来像这样。

如果我在项目的根目录中使用 styles.scss 中的 @import，一切正常。

@import "../node_modules/bootstrap/dist/css/bootstrap.min.css"

这些看起来是正确的，但仍然不能正常工作。工具提示不显示，下拉菜单不工作。

如果我通过 cdn 在 index.html 文件中包含 bootstrap javascript 文件，下拉菜单将开始工作。

但是说我想像许多教程推荐的那样将 javascript 和 css 移动到 angular.json 文件中。

我已经从 index.html 文件中删除了 cdn，并且我已经从 styles.scss 文件中删除了导入并将它们移动到 angular.json 中，就像这样。

但是突然我的页面又坏了。所有样式都消失了，下拉菜单不起作用。我已经尝试更新 angular.json 文件中的路径以删除 ./ 但这没有帮助。

我不确定我做错了什么。为什么我的 angular.json 文件没有按预期加载我的样式和脚本？我应该为此烦恼还是通过我的 scss 文件和通过 html 加载的脚本 cdn 加载东西？

Answer 1

如果您像那样手动执行此操作，则还需要将 popper 放入 angular.json 的脚本数组中（我相信在 bootstrap.js 以上）。

但我不会那样手动操作。我只会使用 ng add @ng-bootstrap/ng-bootstrap。它会为你设置一切。先撤消所有待定更改，或开始一个新项目。

Answer 2

你在 angular.json 文件中添加资源是正确的。

但是，您似乎在错误的位置导入了资源。

您需要在 angular.json 的 build 部分导入样式和脚本，这通常在文件中稍高一些。

像这样：（请忽略“**”，只是为了突出部分）

"architect": {
        **"build": {**
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/website",
            "index": "projects/website/src/index.html",
            "main": "projects/website/src/main.ts",
            "polyfills": "projects/website/src/polyfills.ts",
            "tsConfig": "projects/website/tsconfig.app.json",
            "assets": [
              "projects/website/src/favicon.ico",
              "projects/website/src/assets",
              "projects/website/src/.htaccess"
            ],
            **"styles": [**
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "projects/website/src/styles.scss"
            ],
            **"scripts": [**
              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
            ],

如果您打算进行 unit/e2e 测试，您仍然需要在测试部分导入这些资源。

Bootstrap angular 项目中的 5 个通过 angular.json 文件

Bootstrap 5 in angular project via angular.json file

twitter-bootstrap

angular