如何在 Angular 库中添加 bootstrap

Question

我的版本是：

1. npm v6.14.12
2. node v10.24.1
3. angular-cli v8.0.2

我用这些命令创建了一个库：

第 1 步：ng new my-workspace --create-application=false

第 2 步：cd my-workspace 然后 ng generate library my-lib

第 3 步：cd projects/my-lib/src/lib

第 4 步：npm install bootstrap --save

之后我可以看到my-workspace/projects/my-lib/package.json

  "dependencies": {
    "bootstrap": "^5.0.1"
  }

但现在我卡住了。我被告知在 style.css 或 angular.json 中添加 bootstrap。但是这些文件不会用于库代码。请告诉我如何进行。我找到的几乎所有文章都是针对成熟的 angular 应用程序的。

这意味着

Answer 1

我们需要在 angular.json 文件中添加以下内容以完成 Bootstrap 的安装。

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css"
 ],


 "scripts": [
     "node_modules/bootstrap/dist/js/bootstrap.min.js"
  ]

您也可以在这里查看更多信息：

请按照本指南了解更多关于库创建的信息：https://angular.io/guide/creating-libraries

Answer 2

直接在您的 src/style.css

中导入

@import '~bootstrap/dist/css/bootstrap.min.css';

Answer 3

您的问题可能不是关于如何将 bootstrap 添加到 angular 应用程序，而是关于如何将 bootstrap 添加到 angular 库。

以下方法可能会解决您的问题。

首先在my-workspace/projects/my-lib/package.json的peerDependencies部分添加bootstrap如下：

 "peerDependencies": {
     ...
     "bootstrap": "^5.0.1",
     ...
 }

当您的 angular 库用作另一个 angular 项目的依赖项时，这将安装 bootstrap。

然后创建 .scss 文件并将以下行放入文件中，稍后在相应的组件中指定它。

@import "node_modules/bootstrap/scss/bootstrap"

之后，在包含您的库的 angular 项目的 package.json 的 devDependencies 部分中添加 bootstrap，如下所示。这将允许您在开发库时使用 bootstrap。

"devDependencies": {
    ...
    "bootstrap": "^5.0.1",
    ...
  }

如何在 Angular 库中添加 bootstrap

How to add bootstrap in an Angular library

angular-bootstrap

angular