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

In this tutorial I will explain how to install all the dependencies needed in order to create an Angular 6 project.

The tutorial covers the following things:

• 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: 6.0.8
• Node: 8.11.3
• npm: 5.6.0
• 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 8.11.3 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:

PS C:\Users\scb> npm --version
5.6.0
PS C:\Users\scb> node --version
v8.11.3

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 v6

Open Command Prompt, Windows PowerShell application 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 or shortly ng -v. The output should look like this:

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


Angular CLI: 6.0.8
Node: 8.11.3
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.6.8
@angular-devkit/core         0.6.8
@angular-devkit/schematics   0.6.8
@schematics/angular          0.6.8
@schematics/update           0.6.8
rxjs                         6.2.2
typescript                   2.7.2

Scaffold new project using Angular CLI

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

Open your preferred command line tool and run ng new my-happy-app. This command will create an angular application called my-happy-appin a new directory with the same name.

You can navigate directly to the new folder by running the command cd my-happy-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 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!