How to add bootstrap in an Angular library

Question

My versions are:

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

I created a library with these commands:

Step 1: ng new my-workspace --create-application=false

Step 2: cd my-workspace then ng generate library my-lib

Step 3: cd projects/my-lib/src/lib

Step 4: npm install bootstrap --save

After this I can see my-workspace/projects/my-lib/package.json

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

But now I'm stuck. I was to told to add bootstrap either in style.css or angular.json. But these files will not be there for a library code. Please tell me how to proceed with this. Almost all the articles that I found were for a full fledged angular application.

This means

Answer 1

Probably your question not about how to add bootstrap to an angular app but about how to add bootstrap to an angular library.

May be following approaches would resolve your problem.

First add bootstrap in the peerDependencies section of my-workspace/projects/my-lib/package.json as below:

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

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

Then create .scss file and put the following line in the file and later on specify it in your corresponding component.

@import "node_modules/bootstrap/scss/bootstrap"

After that add bootstrap, like below, in the devDependencies section of package.json of the angular project containing your library. This will allow you to use bootstrap while you are developing the library.

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

Answer 2

We need add below in our angular.json file to complete the installation of Bootstrap.

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


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

You can also look here for more: How to add bootstrap to an angular-cli project

Please follow this guide to know more about library creation: https://angular.io/guide/creating-libraries

Answer 3

import direcly in your src/style.css

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