如何在 Angular 库中添加引导程序

Question

我的版本是：

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

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

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

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

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

第四步：npm install bootstrap --save

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

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

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

这意味着

Answer 1

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

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

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

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

当您的 Angular 库被用作另一个 Angular 项目的依赖项时，这将安装引导程序。

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

@import "node_modules/bootstrap/scss/bootstrap"

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

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

Answer 2

在你的 src/style.css 中直接导入

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

Answer 3

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

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


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

您也可以在这里查看更多信息：How to add bootstrap to an angular-cli project

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