Repository navigation
All guides deprecated: how to simply load bootstrap 3 and jquery in 5.1.1 #1303
Description
Just cloned the starter and i'm stuggling to get bootstrap 3 (css and js) and jquery running. I'm not interested in sass stuff: just simple bootstrap and jquery.
Previously on our project we used Angular-CLI and importing bootstrap and in the angular-cli.json we simply had to add (after a proper npm install bootstrap jquery --save):
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
But here, with "raw" webpack, i'm lost. All the guides, previous issues and so on seems outdated as they use a vendor.ts which seems not to exist anymore.
Is there any way to import easily bootstrap and jquery working with the current Starter version?
Activity
[-]Impossible to simply load bootstrap and jquery in 5.1.1[/-][+]Impossible to simply load bootstrap 3 and jquery in 5.1.1[/+][-]Impossible to simply load bootstrap 3 and jquery in 5.1.1[/-][+]All guides deprecated: how to simply load bootstrap 3 and jquery in 5.1.1[/+]colinskow commentedon Dec 28, 2016
Toward the top of
./src/app.app.module.ts:To import CSS:
import 'bootstrap/dist/css/boostrap.min.css'To import JS:
Follow instructions here:
#696 (comment)
After #1304 is merged you will be able to directly import Bootstrap SASS files, customize the variables, and Webpack will automatically generate an external CSS file for your production build. Right now it all gets inlined in the Javascript which slows loading time for a big library like Bootstrap.
katallaxie commentedon Dec 28, 2016
I would recommend to extract all critical css to a css file outside of the module. It will allow to use it for anything that is also necessary for loading screens etc. I usually extract everything to a
critical.scssand have this above the fold.gviligvili commentedon Dec 29, 2016
I got bootstrap styles to work, but the glyphicons just wont show (I see a square).
basst314 commentedon Jan 3, 2017
same question for recent v5.2.0 Release.
@colinskow you referenced comment #696, but in there's also use of non existing vendor.ts.
Is there any current, v5.2.0 compatible guide to easily integrate jquery+bootstrap (3.3.7 or 4) into this Seed?
colinskow commentedon Jan 4, 2017
@basst314
vendor.tsis no longer necessary. Just skip it. All dependencies insidenode_moduleswill automatically be extracted to the vendor chunk without you having to specify them.dhoffi commentedon Jan 4, 2017
using ng2-bootstrap as described in
angular2-webpack-starter/wiki/How-to-use-Bootstrap-3-and-Sass-and-ng2-bootstrap worked for me now.
psaussure commentedon Jan 31, 2017
@colinskow so we juste have to install bootstrap and jquery and the js files for both will automatically be included? As stated by @blackholegalaxy Angular-CLI provide simple styles and script part in angular-cli.json which is somehow translated in webpack instruction.
I'm quite surprised angular class started doesn't provide such a simple way to include external css and js. The same question as bootstrap and jquery could apply to bootstrap-select module for example or font-awesome.
colinskow commentedon Jan 31, 2017
We do support external stylesheets. Follow these instructions:
https://github.com/AngularClass/angular2-webpack-starter#external-stylesheets
To import JQuery and Bootstrap JS follow the instructions here (but just JavaScript instructions, ignore stylesheets.)
https://github.com/ghillert/angular2-webpack-starter-bootstrap
Most people tend to use Angular 2 specific Bootstrap plugins instead of the official JS, which is why we don't support it out of the box.
Many of the Wiki guides are out-dated and need to be updated!
psaussure commentedon Jan 31, 2017
Ok thanks for resources. But if we need any other JS file it could be convenient to be able to import it in the js bundled produced by webpack.
For example, how can I include bootstrap-fileinput JS or any JS bootstrap/jquery plugin? Angular-CLI achieved to simpli list the file in the proper section of their conf file. I found it simple. But I don't want to use angular-cli packages. Just pointing out their method is simpler and allow easy include of any JS file in the bundle.
colinskow commentedon Feb 1, 2017
If the JS library doesn't export a global to
windowjust import it into your project wherever you need it. If it needs to be a global, then follow instructions on the second link I gave you above.