14

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?

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?

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

Janier
  • 3,982
  • 9
  • 43
  • 96
  • 1
    Go for [`ng-bootstrap`](https://ng-bootstrap.github.io/#/getting-started): you will have some convenient bootstrap components – Al-un Jan 16 '19 at 19:03
  • 1
    This is particulary about Angular Library project..Not about Angular project... – Janier Jan 16 '19 at 19:04
  • is [this](https://stackoverflow.com/a/35092006/3681565) what are you looking for? – Gaspar Jan 16 '19 at 19:54
  • Not really..I am past this portion..its working..Now its more on specific problem about bootstrap and library – Janier Jan 16 '19 at 22:12
  • I don't know much about it, but in Angular 7 you must include the "externals librarys" in your package.json, in the "tag" "peerDependencies": { "@angular/common": "^7.2.0", "@angular/core": "^7.2.0",... } – Eliseo Jan 16 '19 at 23:14
  • yup..thats true..I am looking for in depth on Bootstrap... – Janier Jan 17 '19 at 02:41
  • 2
    Hi @Lama, have you found a solution to your problem ? I have the same requirement. – Snook Mar 26 '19 at 07:53

6 Answers6

19

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.

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

  2. npm install in the project root

  3. ng build your-library in the project root

Muffintop
  • 543
  • 4
  • 11
  • Nice answer but look out for this: @import "node_modules/bootstrap/scss/bootstrap" in you component.scss. It will add complete bootstrap to every component you do that for – Jens Alenius Oct 11 '19 at 10:54
6

When you deliver your library you should add bootstrap as a peerDependency to package.json:

 "peerDependencies": {
    "ngx-bootstrap": ">=<MIN-VERSION> <MAX-VERSION",
  }

Due to peerDependencies when someone installs your library ngx-bootstrap will get installed automatically, if it's not present. When the wrong version is installed the user of your library gets a warning.

Here some more info: http://npm.github.io/using-pkgs-docs/package-json/types/peerdependencies.html

Notice: Since npm 3 peerDependencies are not longer installed automatically (see https://blog.npmjs.org/post/110924823920/npm-weekly-5)

jhen
  • 1,164
  • 1
  • 11
  • 24
J. S.
  • 2,268
  • 1
  • 12
  • 27
  • How can i use bootstrap mixins and all? – Janier Jan 23 '19 at 22:10
  • What exactly do you mean? Using mixins inside your library or in a project which uses your library? As long as you have styles in your node_modules either from bootstrap or your lib you should be able to import it via tild e.g. @import ~my-lib/path/to/styles – J. S. Jan 25 '19 at 07:35
  • You can use the bootstrap mixins like in a normal project. Just import verything you need from your node_modules. – J. S. Jan 28 '19 at 07:31
1

If you are using ng-packagr, you can use the below process that I followed.

I added the styles in styleIncludedPaths of ng-package.json as shown below.

"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"
    ]
  }
Eeshwar Ankathi
  • 260
  • 3
  • 11
0

1) you can directly install using

npm install bootstrap

and than in your angular cli you can inlude it using

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

2) you can also use ngx-bootstrap, it will help you in many input components

npm install ngx-bootstrap
edrich13
  • 703
  • 6
  • 15
  • my recommendation is to use NG-BOOTSTRAP instead of NGX-BOOTSTRAP, since NGX we should have jquery and angular is not responsible – JMF Jan 23 '19 at 13:16
  • 2
    I am focussed on Angular Library .Not on angular application – Janier Jan 23 '19 at 22:10
  • @JMF neither NGBootstrap nor NGX_Bootstrap have nothing to do with jquery. They are fork of eachother. – netalex Oct 16 '19 at 12:43
0

You can simply install normal bootstrap with the command below

npm i bootstrap

Then since you are using Angular 6, you will need an angular.json file anf the @angular-devkit/build-angular, not angular-cli.json. Install the devkit with the command below

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

and add this line of code in the "architect" section under "build" and into "options" you need to place the style references. I have given an example below.

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

I recommend referring to the docs on the specifics around the devkit and the angular.json configuration

Ben Brown
  • 329
  • 2
  • 9
0

I don't know if it answers your question, but firstly you have to add bootstrap to your library peer dependencies, after that, in all your projects which use that library you have to include bootstrap styles to global styles in angular.json.

After that you can use bootstrap classes from templates in your library and you can be sure that styles would be applied. Also, if you want to use mixins or variables from bootstrap, you can just import needed scss bootstrap files into your components' scss files in library, like that:

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

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

During build all these imported scss files would be compiled and built into your library output files.

There are other ways to include styles to library, but all of them require interception/extension of library build process.

Amir Arbabian
  • 3,419
  • 1
  • 6
  • 12
  • what are the other ways? – Janier Jan 26 '19 at 16:45
  • The main problem, in my opinion, is that this way doesn't very descriptive in terms of requirement of bootstrap styles, so who would now that your library requires bootstrap to be included into global styles? You can do your own global style in library (some scss file) where you can import bootstrap and configure it there (in that file) specifically for your library, but you cannot just emit scss file from library so you need to add post build script that would do that, and your consumers should include your library's global styles file – Amir Arbabian Jan 26 '19 at 17:32