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
node --version(or shortly
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
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. 🙂