4

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

Improve this question

3 Answers 3

Reset to default
10

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",
    ...
  }
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Exactly what I was looking for. Thank. This worked.
I have some extra questions regarding the .scss file. Could you elaborate more on where the .scss should go in the library? Is it at the src level or the lib level? Does it need to be part of the assets in the config so that it exports correctly? If so how do I do that?
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

Improve this answer

1 Comment

once you completed the creation process , we can treat lib as normal angular project and same with dependencies import as well. I think you messed things here with this cd projects/my-lib/src/lib. Please recheck your node-modules installation as well.
0

import direcly in your src/style.css

@import '~bootstrap/dist/css/bootstrap.min.css';
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.