i used the "ng cli" to create a new angular 2 project. Now I want to use bootsrap and installed it with npm. So far so good - here is my question: how can I add bootstrap (which is in the npm packages folder) correct to my angular project, so that the css and js files are built with all the other files.
P.S.: Ng Cli uses webpack, but there is no webpack config. Has the information to be in the "angular-cli.json"?
Thanks!
You may read more about third party library installation here.
In your CLI JSON,
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"styles.css"
],
Hope this helps!!
<style type="text/css">/*! * Bootstrap v3.3.7 (http://getbootstrap.com) * Copyright 2011-2016 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } ...etc. </style> I would like to have something like: <link rel="stylesheet" type="text/css" href="myCompressedBootstrap.css">
First you do this
npm install ng2-bootstrap bootstrap --save
in your console to download module boostrap on root the projects, find app.module in src/app/app.module.ts and later add the components boostrap, it is thus:
import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap';
...
@NgModule({
...
imports: [AlertModule, ... ],
...
})
Go to root projects, and open file angular-cli.json y put in where they go styles, the next:
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
this is to compile the css, when will you run the command ng serve, also you can put others file css and will compiled also.
At this time, you can use the components of boostrap in the html template the any components
<alert type="success">hello</alert>
to see more, visit the next link: http://valor-software.com/ng2-bootstrap/#/
and... done! XD, sorry for my bad english, I hope this can help you
Note: restart ng serve after all this
You might also find this Native Angular2 directives for Bootstrap project interesting: https://github.com/valor-software/ng2-bootstrap
