Configure Bootstrap with Angular 2, Webpack and Spring – Tutorial


I update the reference Angular/Java application for this blog ( adding Bootstrap.

The new homepage is now like this:

The data comes from an H2 database deployed with the application.

To use Bootstrap this step are required:

in package.json add the dependency to bootstrap

"bootstrap": "3.3.7", 
"jquery": "3.1.1" 

or import it with npm install bootstrap@3 -save

and npm install jquery -save

I didn’t import Bootstrap 4 because is still in alpha version.

We have to tell to webpackage to import the files in the distribution package. In vendor.ts add:

// bootstrap  
import 'jquery'; 
import 'bootstrap/dist/js/bootstrap'; 
import 'bootstrap/dist/css/bootstrap.min.css'; 

in webpack.common.js I added the ‘synonyms’ of jquery:

new webpack.ProvidePlugin({ 
jQuery: 'jquery', 
$: 'jquery', 
jquery: 'jquery' 

I created a menu component that contains the bootstrap tags:

You can see the content here: home.html

The component menu.component.ts is self explanatory:

import {Component} from "@angular/core"; 
    selector : 'bootstrap-menu', 
    templateUrl :'../html/menu.html' 
export class MenuComponent { 

To reuse the same menu in every page I call the menu component from the app.component.ts that is the main component of the module:

    selector: 'my-app', 
    template: `<bootstrap-menu></bootstrap-menu> 
    providers: [HttpModule, ConstantsService, Location] 

the template calls the bootstrap menu followed by the component called by the router.

In the developer console you can see the data sent by the server:

Fullstack Angular / Java application quick start guide.
WebApp built by Marco using SpringBoot 3.2.4 and Java 21. Hosted in Switzerland (GE8).