Configure Bootstrap with Angular 2, Webpack and Spring – Tutorial

I update the reference Angular/Java application for this blog (https://angular.cafe) 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"; 
 
@Component({ 
    selector : 'bootstrap-menu', 
    templateUrl :'../html/menu.html' 
}) 
export class MenuComponent { 
constructor(){ 
}} 
 

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:

 
    @Component({ 
    selector: 'my-app', 
    template: `<bootstrap-menu></bootstrap-menu> 
       <router-outlet></router-outlet> 
    `, 
    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: