Angular 6 Library using bootstrap

Question

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 f

Answer 1

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. 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.

2. 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"

3. 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 {

    ....

}

4. 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

5. npm install in the project root

6. ng build your-library in the project root