使用引导程序的 Angular 6 库

Question

我正在使用 Angular 6 库功能 https://github.com/angular/angular-cli/wiki/stories-create-library 在 Angular 项目中创建一个 Angular 库

我正在通过它创建一些可重用的组件，这些组件可以在我的项目中重用.. 像名称组件、电话号码组件等。 我创建了组件.. 但我不确定如何在库项目中包含引导程序？我猜使用我的库的项目将安装引导程序... 我该如何处理？

这不是关于如何将引导程序添加到 Angular 应用程序。这是不同的，我正在寻求关于如何添加到 Angular 库的意见……我应该将它与我的库打包还是应该是对等依赖？如果它是对等依赖，我该怎么做？

我还必须在库项目中使用引导程序中的一些 mixin。如何在库项目中获取它们？

Answer 1

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

1. 在project/your-library/package.json 的peerDependencies 部分添加引导程序，例如

{ "name": "你的图书馆", “版本”：“0.0.1”， “对等依赖”：{ "@angular/common": "^6.0.0-rc.0 || ^6.0.0", "@angular/core": "^6.0.0-rc.0 || ^6.0.0", “引导程序”：“^4.3.1” } }

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

1. 在库中与您的组件处于同一级别创建一个.scss 文件（例如your-component.scss）并包含以下行：

@import "node_modules/bootstrap/scss/bootstrap"

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

@零件（{ 选择器：'你的库'， templateUrl: './your-component.html', styleUrls: ['./your-component.scss'] }) 导出类 YourComponent { …… }

4. 在包含您的库的项目的顶层package.json 的devDependencies 部分添加引导程序。这将允许您在开发库时使用引导程序

5. npm install 在项目根目录中

6. ng build your-library 在项目根目录中

Answer 2

当你交付你的库时，你应该将 bootstrap 作为 peerDependency 添加到 package.json：

 "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）

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"
    ]
  }

Answer 4

1) 可以直接使用安装

npm install bootstrap

并且比在你的 Angular cli 中你可以使用它来包含它

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

2) 你也可以使用 ngx-bootstrap，它会在很多输入组件中帮助你

npm install ngx-bootstrap

Answer 5

您可以使用以下命令简单地安装普通引导程序

npm i bootstrap

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

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

并在“build”下的“architect”部分中添加这行代码，并在“options”中添加您需要放置样式引用的代码。我在下面给出了一个例子。

"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 and the angular.json configuration 的详细信息的文档

Answer 6

我不知道它是否回答了您的问题，但首先您必须将引导程序添加到您的库对等依赖项中，然后，在所有使用该库的项目中，您必须在 @987654321 中将引导程序样式包含到全局样式中@。

---

之后，您可以使用库中模板中的引导类，并且可以确保应用样式。此外，如果您想使用引导程序中的 mixins 或变量，您可以将所需的 scss 引导程序文件导入库中组件的 scss 文件中，如下所示：

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

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

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

---

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