Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 6 Library using bootstrap

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?

like image 700
Janier Avatar asked Jan 16 '19 18:01

Janier


People also ask

Can I use Angular with Bootstrap?

Bootstrap is a popular CSS framework which can be used within an Angular project.

How do I download Angular Bootstrap?

3+ Ways to Include Bootstrap 5 In Your Angular 13 Project Import the Bootstrap CSS file in the global styles. css file of your Angular project with an @import keyword. Add the Bootstrap CSS and JavaScript files in the styles and scripts arrays of the angular. json file of your project.

How to install bootstrap in angular?

There are various ways that you can use to install Bootstrap in your project: Installing Bootstrap from npm using the npm install command, Downloading Bootstrap files and adding them to the src/assets folder of your Angular project, Using Bootstrap from a CDN.

What do you know about ng-bootstrap?

If you know Angular, you also know ng-bootstrap. All the Bootstrap widgets you know like carousel, modal, popover, tooltip, tabset plus some additional goodies like datepicker, rating and typeahead. All code is tested with almost 100% coverage, all changes are meticulously reviewed. We are not cutting corners. All the widgets are accessible.

What is the use of bootstrap?

Bootstrap is an open-source repository that provides a couple of native angular widgets which are built using Bootstrap 4 CSS. As we know Bootstrap is one of the popular CSS framework which is used to build stylish and modern applications, which has HTML, CSS and JavaScript libraries.

Is there beta support for Bootstrap 5?

Beta support for Bootstrap 5 is available with 12.0.0-beta.X Please remember it is not production ready, report any issues and make sure to check the changes. Angular widgets built from the ground up using only Bootstrap 4 CSS with APIs designed for the Angular ecosystem. No dependencies on 3rd party JavaScript.


3 Answers

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

like image 116
Muffintop Avatar answered Oct 18 '22 20:10

Muffintop


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)

like image 24
J. S. Avatar answered Oct 18 '22 19:10

J. S.


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"
    ]
  }
like image 1
Eeshwar Ankathi Avatar answered Oct 18 '22 19:10

Eeshwar Ankathi