Tutorial: Get started with Angular CLI v8, npm, Node.js and Visual Studio Code

This tutorial follows the steps described in Get started with Angular CLI v6, npm, Node.js and Visual Studio Code.

It’s an updated version for those that are starting directly with the latest version of Angular.

In this tutorial you will find out how to install all the dependencies needed in order to create an Angular 8 project.

The following topics will be covered:

• Install Node and npm
• Install Visual Studio Code
• Install Angular CLI
• Scaffold new project using Angular CLI

We will be using the following versions of required dependencies:

• Angular CLI: 8.3.23
• Node: 12.14.1
• npm: 6.13.4
• Visual Studio Code (optional)

Let’s get started!

Install Node and npm

npm is installed with Node.js, so it is a simple straightforward process. The installer package is available on the Node.js website. Download the recommended LTS (Long Term Support) version which is the most stable one, and run the installer. At the time of writing 12.14.1 is the latest Node.js LTS version.

You can test that you have installed Node.js and npm by running simple command to check the installed version. Open Command Prompt or Windows PowerShell application and type

• npm --version (or shortly npm -v)
• node --version (or shortly node -v)

You should see something like this:

C:\Users\scb> npm --version
6.13.4
C:\Users\scb> node --version
v12.14.1

Install Visual Studio Code

This is probably the easiest step and an optional one. You just have to go to Visual Studio Code webiste, download and run the installer.

Install Angular CLI v8

Open Command Prompt (cmd) or the integrated terminal from the fresh installed Visual Studio Code (after you open VS Code, go to View – Integrated Terminal) and run the command npm install -g @angular/cli. The -g argument will cause npm to install Angular CLI package globally which allows ng command be ran from the command line directly.

As we did for the Node.js and npm, we can verify that the right veriosn of Angular CLI is installed by running the command ng --version. The output should look like this:

    
     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.3.23
Node: 12.14.1
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.803.23
@angular-devkit/core         8.3.23
@angular-devkit/schematics   8.3.23
@schematics/angular          8.3.23
@schematics/update           0.803.23
rxjs                         6.4.0

Scaffold new project using Angular CLI

After installing Node.js, npm and Angular CLI we can scaffold a fresh Angular 8 application using ng new command.

Open your preferred command line tool and run ng new my-angular8-app. You will be asked two questions:

• Would you like to add Angular routing? (y/N)
  • press y and then Enter

• Which stylesheet format would you like to use? (Use arrow keys)
  CSS
  SCSS [ https://sass-lang.com/documentation/syntax#scss ]
  Sass [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less [ http://lesscss.org ]
  Stylus [ http://stylus-lang.com ]
  • use arrow key to select CSS (or other option if you like) and then press Enter

After second Enter the Angular application called my-angular8-app will be created in a new directory with the same name.

You can navigate directly to the new folder by running the command cd my-angular8-app, or you can open the directory in Visual Studio Code for a better view of the project files.

You can start the development server if you are in the project directory, just open VS code integrated terminal as described above and run ng serve.

In the output you will see something similar with:

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

This means that you can see your new Angular 8 application on the address listed, just copy and paste it in your browser.

That’s it, you finished preparing your playground for future Angular applications. 🙂

Happy coding!