How to create a new Angular project

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:

  $ ng --version
   
  Angular CLI: 6.0.8
  Node: 8.11.3
  OS: linux x64
  Angular: 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:

$ ng new awesome-project --style=scss

Go to the project main directory:

$ cd awesome-project

A git repository has been already initialized:

$ 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:

$ 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:

$ 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:

$ npm install bootstrap

Add the following path in the angular.json file:

// angular.json
…
"styles": [
    …
    "node_modules/bootstrap/scss/bootstrap.scss"
],
…

Start the Angular server to make sure that the project was successfully created:

$ 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