With Angular CLI you can bootstrap a new project effortlessly. Let’s create a new Angular 6 application complemented with Bootstrap 4 and Sass preprocessor.
Requirements
- Angular CLI – a command line interface tool that generates projects, components, modules, services.
I’m working on:
123456$ ng --versionAngular CLI: 6.0.8Node: 8.11.3OS: linux x64Angular: 6.1.1 - npm, remember that Node.js has to be installed. Check out the post about managing project dependencies with npm if your project lacks a javascript package manager.
- In this post the example project depends on the
scss
preprocessor. If you want to set a different preprocessor or alter the global configuration for all feature projects – read the How to change a CSS preprocessor in an Angular project post.
Create a fresh project
Run the following command to generate a fresh project:
1 |
$ ng new awesome-project --style=scss |
Go to the project main directory:
1 |
$ cd awesome-project |
A git repository has been already initialized:
1 2 3 4 5 6 7 8 9 10 |
$ git status On branch master nothing to commit, working tree clean $ git log commit 2e6e36ec34282b83658d2e4e7a26a39e79f38791 (HEAD -> master) Author: little_pinecone Date: Thu Aug 30 10:57:23 2018 +0200 initial commit |
npm
allows you to fix some known vulnerabilities found in the project dependencies, you can run the following command:
1 |
$ npm audit fix |
This command automatically eliminates well-acknowledged javascript vulnerabilities by updating those faulty libraries versions that don’t introduce braking changes.
Remember to commit the adjustments made in the package.json
file:
1 2 3 4 5 6 |
$ git status modified: package-lock.json modified: package.json $ git add -A $ git commit -m "npm packages updated" |
Install Bootstrap
To add the latest version of the Bootstrap styles to the project, run the following command:
1 |
$ npm install bootstrap |
Add the following path in the angular.json
file:
1 2 3 4 5 6 7 |
// angular.json … "styles": [ … "node_modules/bootstrap/scss/bootstrap.scss" ], … |
Start the Angular server to make sure that the project was successfully created:
1 2 |
$ ng serve --open ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** |
Photo by Autri Taheri on StockSnap