使用Bootstrap的Angular 6库 [英] Angular 6 Library using bootstrap

问题描述

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

I am creating an angular library in an angular project using angular 6 library feature https://github.com/angular/angular-cli/wiki/stories-create-library

我正在通过此方法创建一些可重用的组件，这些组件可在我的项目中重用.例如名称组件，电话号码组件等. 我创建了组件. 但是我不确定如何在库项目中包含引导程序?我猜想消耗我的库的项目将安装引导程序... 我该如何处理?

I am creating few reusable components via this which can be resused across my projects.. somehting like name component , phone number component etc.. I created the components.. but I am not sure how to include bootstrap in the library projects? The projects which consume my library will install bootstrap I guess... How do i approach this?

这不是关于如何将引导程序添加到Angular应用程序中的问题.这是有区别的，我正在寻求有关如何添加到Angular库中的意见...我应该将其与我的库一起打包还是应该是对等依赖关系?如果它是对等依赖项，我该怎么办?

This is not on how to add bootstrap to Angular application.. This is diffent and I am seeking opinion on how to add to Angular Library... Should I package it with my library or Should it be a peerdependency? If its a peer dependency , how do i go about it?

我也必须在库项目中使用引导程序中的一些mixins.如何在库项目中获取它们?

I have to use some mixins from bootstrap in the library project as well.. How to get them in the library project?

推荐答案

我认为，这里的许多答案都忽略了有关如何向自定义应用添加引导程序的问题，否.它专门涉及如何将引导程序添加到自定义角度库.不知道您是否已经找到解决方案，但这对我有用.

I think many of the answers here missed that the question was NOT about how to add bootstrap to an angular app. It's specifically about how to add bootstrap to a custom angular library. Not sure if you already found the solution, but this is what worked for me.

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

1. Add bootstrap in the peerDependencies section of project/your-library/package.json, e.g.

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

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

This will install bootstrap when your library is used as a dependency in another project.

1. 在与库中组件相同的级别上创建一个.scss文件(例如your-component.scss)，并具有以下行:

1. Create a .scss file (e.g your-component.scss) at the same level as your component in the library and have this line:

@import "node_modules/bootstrap/scss/bootstrap"

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

1. In your component, specify the .scss file you created in step 2 as styleUrls, e.g.

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

    ....

}

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

1. Add bootstrap in the devDependencies section of the top level package.json of the project containing your library. This will allow you to use bootstrap while you are developing the library

npm install

ng build your-library

这篇关于使用Bootstrap的Angular 6库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！