Brtdku

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?

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

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

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

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.