All guides deprecated: how to simply load bootstrap 3 and jquery in 5.1.1

[blackholegalaxy]

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?

[colinskow]

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]

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.scss and have this above the fold.

[gviligvili]

I got bootstrap styles to work, but the glyphicons just wont show (I see a square).

[basst314]

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]

@basst314 vendor.ts is no longer necessary. Just skip it. All dependencies inside node_modules will automatically be extracted to the vendor chunk without you having to specify them.

[dhoffi]

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]

@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]

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]

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]

If the JS library doesn't export a global to window just 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.