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.
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
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
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
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 (
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:
You are good to go!
At least you should be. Contact me if something’s broken or missing.