使用Bootstrap的Angular 6库

Question

我正在使用Angular 6库功能在Angular项目中创建一个Angular库https://github.com/angular/angular-cli/wiki/stories-create-library，通过这个库我创建了一些可重用组件，比如姓名组件、电话号码组件等等。但是我不确定如何在库项目中包含Bootstrap？使用我的库的项目将安装Bootstrap，我猜测...我该如何处理？

这不是关于如何将Bootstrap添加到Angular应用程序的问题...这是不同的，我正在寻求如何添加到Angular库的意见...我应该将其与我的库打包还是作为对等依赖项？如果它是对等依赖项，我该如何处理？

我还需要在库项目中使用一些来自Bootstrap的mixin。如何在库项目中获取它们？

- Janier

---

选择 ng-bootstrap：您将获得一些方便的 Bootstrap 组件。 - Al-un

这是关于Angular Library项目的，而不是关于Angular项目的。 - Janier

这是您正在寻找的吗？这里。 - Gaspar

我对此不是很了解，但在Angular 7中，您必须在您的package.json文件中的"tag" "peerDependencies"中包含"externals librarys"，如下所示：{ "@angular/common": "^7.2.0", "@angular/core": "^7.2.0",... }。 - Eliseo

嗨@Lama，你找到解决问题的方法了吗？我也有同样的需求。 - Snook

Answer 1

我认为这里的许多答案都忽略了问题不在于如何将Bootstrap添加到Angular应用程序中，而是专门关于如何将Bootstrap添加到自定义的Angular库中。不确定您是否已经找到解决方案，但这是对我有用的方法。

1. 在project/your-library/package.json的peerDependencies部分中添加Bootstrap，例如：

{
    "name": "your-library",
    "version": "0.0.1",
    "peerDependencies": {
        "@angular/common": "^6.0.0-rc.0 || ^6.0.0",
        "@angular/core": "^6.0.0-rc.0 || ^6.0.0",
        "bootstrap": "^4.3.1"
    }
}

这将在另一个项目中使用您的库作为依赖项时安装Bootstrap。

2. 在库中与组件同级别创建一个.scss文件（例如your-component.scss）并添加以下行：

@import "node_modules/bootstrap/scss/bootstrap"

3. 在你的组件中，将你在步骤2中创建的 .scss 文件指定为styleUrls，例如：

@Component({
    selector: 'your-lib',
    templateUrl: './your-component.html',
    styleUrls: ['./your-component.scss']
})
export class YourComponent {
....
}

4. 在包含你的库的项目的顶层 package.json 的 devDependencies 部分中添加 bootstrap。这将允许你在开发库时使用 bootstrap。

5. 在项目根目录下运行 npm install。

6. 在项目根目录下运行 ng build your-library。

- Muffintop

---

不错的答案，但要注意这一点：在你的component.scss中加入@import "node_modules/bootstrap/scss/bootstrap"，它会将完整的Bootstrap添加到你为每个组件所做的工作中。 - Jens Alenius

Answer 2

当您发布您的库时，应将bootstrap添加为package.json中的peerDependency:

 "peerDependencies": {
    "ngx-bootstrap": ">=<MIN-VERSION> <MAX-VERSION",
  }

由于peerDependencies，当有人安装您的库时，如果ngx-bootstrap不存在，则会自动安装。如果安装的版本不正确，则您的库的用户将收到警告。

以下是更多信息：http://npm.github.io/using-pkgs-docs/package-json/types/peerdependencies.html 注意：自从npm 3以后，peerDependencies不再自动安装（请参见https://blog.npmjs.org/post/110924823920/npm-weekly-5）。

- J. S.

---

我该如何使用Bootstrap的mixin和全部内容？ - Janier

你的意思是什么？是在你的库内部使用 mixins 还是在使用你的库的项目中使用 mixins？只要你的 node_modules 中有来自 bootstrap 或你的库的样式，你就可以通过波浪线导入它，例如 @import ~my-lib/path/to/styles。 - J. S.

你可以像在普通项目中一样使用Bootstrap的mixin。只需从node_modules中导入所需的所有内容即可。 - J. S.

Answer 3

如果您正在使用ng-packagr，您可以使用我所遵循的以下过程。我在ng-package.json的styleIncludedPaths中添加了样式，如下所示。

"lib": {
    "entryFile": "src/public_api.ts",
    "cssUrl": "inline",
    "styleIncludePaths": [
      "src/assets/styles",
      "../../node_modules/bourbon/app/assets/stylesheets",
      "../../node_modules/bourbon-neat/app/assets/stylesheets",
      "../../node_modules/bootstrap/dist/css"
    ]
  }

- Eeshwar Ankathi

Answer 4

1) 你可以直接使用以下命令进行安装

npm install bootstrap

然后在你的Angular CLI中，你可以使用以下方式包含它

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

2) 你也可以使用ngx-bootstrap，它将帮助你处理许多输入组件

npm install ngx-bootstrap

- edrich13

---

我的建议是使用NG-BOOTSTRAP而不是NGX-BOOTSTRAP，因为NGX需要使用jQuery而Angular不能负责。 - JMF

我专注于 Angular 库，而不是 Angular 应用程序。 - Janier

@JMF，NGBootstrap和NGX_Bootstrap都与jquery无关。它们是彼此的分支。 - netalex

Answer 5

您可以通过以下命令轻松安装普通的Bootstrap

npm i bootstrap

既然您正在使用Angular 6，那么您将需要一个angular.json文件和@angular-devkit/build-angular，而不是angular-cli.json。请使用以下命令安装devkit

npm i @angular-devkit/build-angular --save-dev

在“构建”下的“架构”部分中添加此行代码，并将样式引用放入“选项”中。我已经给出了以下示例。

"architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "public",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "preserveSymlinks": true,
        "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "node_modules/bootstrap/dist/css/bootstrap-theme.min.css"],
      },
      "configurations": {
        "production": {
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "aot": false,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": false,
          "assets": [
            "src/favicon.ico",
            "src/assets"
          ],
        },
        "local": {
          "assets": [
            "src/favicon.ico"
          ]
        }
      }
    }

我建议参考有关devkit和angular.json配置的文档。

- Ben Brown

---

这是用于Angular库项目还是仅限于Angular项目？ - Janier

这对于一个没有样式选项的库是行不通的。 - netalex

Answer 6

我不知道这是否能回答你的问题，但首先你必须将Bootstrap添加到你的库对等依赖项中，之后，在使用该库的所有项目中，你都必须将Bootstrap样式包含在angular.json的全局样式中。

---

接下来，您可以在库中使用模板中的Bootstrap类，并确保样式已应用。此外，如果您想要使用Bootstrap的mixin或变量，只需将所需的scss Bootstrap文件导入到库中组件的scss文件中，如下所示：

@import "~bootstrap/scss/bootstrap-grid";

@include media-breakpoint-up(sm) {
    .some-class {
      display: block;
    }
}

在构建过程中，所有这些导入的 SCSS 文件都将被编译并构建到您的库输出文件中。

---

有其他方法可以将样式包含到库中，但它们都需要拦截/扩展库构建过程。

- Amir Arbabian

---

有其他的方式吗？ - Janier

我认为主要问题在于这种方式在引用bootstrap样式方面不够明确，因此谁会知道你的库需要将bootstrap包含在全局样式中呢？ 你可以在库中创建自己的全局样式（一些scss文件），在那里导入bootstrap并进行配置（在该文件中）以适应你的库，但是你不能仅从库中发出scss文件，因此你需要添加后构建脚本来完成这项工作，并且你的消费者应该包括你的库的全局样式文件。 - Amir Arbabian