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 shortlynpm -v
)node --version
(or shortlynode -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!
Be First to Comment