Angular 6 Library using bootstrap
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.
- Add bootstrap in the
peerDependencies
section ofproject/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.
- Create a
.scss
file (e.gyour-component.scss
) at the same level as your component in the library and have this line:
@import "node_modules/bootstrap/scss/bootstrap"
- In your component, specify the
.scss
file you created in step 2 asstyleUrls
, e.g.
@Component({ selector: 'your-lib', templateUrl: './your-component.html', styleUrls: ['./your-component.scss']})export class YourComponent { ....}
Add bootstrap in the
devDependencies
section of the top levelpackage.json
of the project containing your library. This will allow you to use bootstrap while you are developing the librarynpm install
in the project rootng build your-library
in the project root
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)
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" ] }