In this chapter we will learn setting up environment for an angular project. At the end of this chapter you should be able to install all prerequisite tools for an angular project i.e. setting up node.js, npm, IDE (Visual Studio Code), checking versions, run a test javascript via node command etc.
To start creating an angular project, we must have node.js, npm, Angular CLI and any IDE like Web Storm, Visual Studio Code installed on system. In this chapter we will learn to setup above tools.
Before start let's see what we understand from above terms. To develop an angular project we need all above mentioned tools i.e. Node.JS, NPM and Angular CLI. Let's see the definition one by one.
Node.js is an open source JavaScript run-time environment. It runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.) and used Javascript on server side. Node.JS run-time environment includes everything you need to execute a program written in JavaScript language. With the help of Node.JS, you can do much more with JavaScript than just making websites interactive.
NPM is Node Package Manager which manage all the dependencies required for a project to run. It installs all the necessary pre-defined or user defined pakages/modules required to run a project.
Angular cli is a command line interface used to scaffold and build angular apps using node.js style (commonJs) modules. Angular CLI makes the best use of existing tools by bundling them together. Not only it provides you scalable project structure, instead it handles all common tedious tasks for you out of the box.
To install node.js follow below steps. You can download node.js installer from below link.
URL: https://nodejs.org/en/download/
Click on above link. You will see node.js download options. It is recommended to download LTS version.
Select option as per your system specification and save the installer. for this tutorial we are downlaoding .msi version for window 64-bit. node version is 8.11.1.
Once download is completed, click on the installer.
A wizard opens up. Follow the instructions and complete the setup. We will go with default options.
Installation is in progress...
Node.Js installation completed. Please note that NPM installs automatically along with node.js installation.
Now you should verify if installation completed sucessfully or not. Open command prompt (if already opened, please close and re-open it) and check version of node.js with node -v command and npm with npm -v command. These command should give you the version details for node and npm respectively.
You can also test node command by creating simple .js file and execute it via node command. Create test.js file and add below lines.
console.log("Hello Dev! We are testing node.js");
Run command node test.js. Command node test.js will execute result as shown below.
New versions of Node and NPM come out frequently. A simple way to install node and npm update is to just download the installer from the Nodejs.org site and run it again. The new version of Node and NPM will replace the older versions automatically.
To install angular CLI, type command npm install -g @angular/cli. It may take some time (5-10 minutes) to complete the installation.
It always installs latest stable angular. Here it will install angular 6.
Installation completed.
Once CLI is installed successfully, we can check it's version via ng -v command:
Run command ng -v to check angular cli version. It should show Angular CLI and Node version.
There are many IDEs available to start angular development like WebStorm, Visual Studio Code, Atom Editor, Brackets etc. We have chosen Visual Studio Code as an option. It is available free of cost and has many rich functionalities. It can be downloaded from this link. https://code.visualstudio.com/download. Download installer and follow the instruction to continue.
A setup wizard opens. click next to start. You can continue with default options.
Installation is in progress...
Installation completed.
Till this point you have node.js, npm, angular CLI and and IDE installed to start the next step. In next chapters we will try to create a project and learn basic concepts of angular.
