Setting up an application with Angular 7, Bootstrap 4, ngBootstrap 4 and momentJS

In this short article I will explain how to set up a new Angular application, using Bootstrap, ngBootstrap and momentJS.


Dependencies

First of all, you might have to install some dependencies, more specifically node.js and the Angular CLI. You’ll be using Typescript, which can be installed via npm.

node.JS

I recommend installing node.js via nvm (Windows users see nvm for Windows). After installing nvm you can install node.js by executing the following commands in your shell:

nvm install 8.11.4

nvm use 8.11.4

The Angular CLI in version 7 requires a node.js version >= 8.9. I have only tested 8.11.4, you might want to install a newer version.

TypeScript & Angular CLI

After installing node.js, you can install TypeScript and the Angular CLI globally with

npm install -g @angular/cli typescript


Creating an application

Once all requirements have been met, we are ready to create a new Angular application by using the Angular CLI.

ng new our-first-application --style scss --prefix <your-custom-prefix>

This command creates a new Angular application called ‘our-first-application’. It uses SASS, since Bootstrap uses SASS and we want to be able to override Bootstraps default styles. Furthermore, we are specifying a prefix, which will be used by the Angular CLI when creating new Components. Using such a prefix is useful for avoiding namespace collisions.

ng serve will compile and serve the application, such that it will be accessible via localhost:4200.


Installing and importing Bootstrap

In order to be able to use bootstrap we need to install it via npm:

npm install bootstrap jquery --save

Notice that we are also installing jQuery. Bootstrap uses jQuery for some of its components. After installing Bootstrap (and jQuery) we need to tell our app to use it. To do so, we need to paste the following lines into the src/styles.scss file:

@import '~bootstrap/scss/bootstrap-reboot';

@import '~bootstrap/scss/bootstrap-grid';

@import '~bootstrap/scss/bootstrap';

To make the Bootstrap scripts available to our app, we need to tell the Angular compiler to gather and bundle them. We accomplish that by adding the paths to the script-files to the scripts-array in the generated angular.json:

"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

Installing and importing ngBootstrap

ngBootstrap delivers “All the Bootstrap widgets you know like carousel, modal, popover, tooltip, tabs plus some additional goodies like datepicker, rating and typeahead.”

We are installing it via:

npm install --save @ng-bootstrap/ng-bootstrap

After installation we need to import it by adding it to the imports-array of our app module (src/app/app.module.ts):

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

...

imports: [
  BrowserModule,
  NgbModule
]

Installing and importing / using momentJS

momentJS is a beautiful library for handling everything Date-related. We can install it via npm, too:

npm install moment --save

To use momentJS, we need to import it to our .ts-files:

import * as moment from 'moment';

Done!

You are good to go!

At least you should be. Contact me if something’s broken or missing.