Angular 4 Installations

Introduction

This article demonstrates how to install Angular 4 in your local system and start working with angular/cli using basic commands.

What is Angular 4?

Before starting with Angular 4, we need to know about Angular 2. Angular 2 is totally different kind of framework from Angular 1.

Angular 1 is based on MVC structure and used to do two-way data binding, whereas Angular 2 is based on components. For every single task, we need to create component. Angular 4 has same concept and same structure as Angular 2 but better in performance. We can create component, directives, services in Angular 4 same as Angular 2.

Before starting with Angular 4

Go to URL https://cli.angular.io .

Angular given us Angular cli , which contains bunch of commands in order to work with Angualar project. Before star working in Angular 4, Need to have NPM installed in your system.NPM stands for Node Package Manager.When you install Node.js , it will automatically add NPM in your system.

Make sure for running Angular 4 in your system , You must have latest version of Node.js which is 6.10 right now or atleast 6.9. Also you have to upgrate NPM version 3.10 or greater in your system.

Node.js Command Prompt

Open Node.js command prompt and check for Node.js installed or not using command.

node -v

Also check for NPM latest version on your system using command.

npm –v

Now on https://cli.angular.io few commands are available to install angular/cli. These commands help us to create and manage Angular 4 projects.

Step 1 : Install angular/cli using command.

npm  install  –g  @angular/cli

It will take few minutes to install as per your system speed.

Here –g means angular/cli will be installed and available for every project in your system.

If you not include –g , it will install in specific folder and only available for specific project.

Step 2 : Now check angular/cli installed in your system or not using command.

ng –v.

This will show cli version, node version and OS version of your system.

Step 3 : Now you are good to go for writing with Angular 4 in specific directory. In node command prompt, create project using below mentioned command.

ng new ProjectName For ex. ng new Angular4Demo

This command will create all the require packages for running Angular 4 application.

Now go into the ‘Angular4’ directory. We can see project call ‘ANGULAR4DEMO’ along with node_modules. Here node_modules contains all the packages for automating the task for manage front end and back end of our Angular 4 application. It also contains various library and packages.

Open project in editor. Here I am using visual studio Code as editor.

you can see all the dependencies added in package.json file are belong from Angular 4.

Now navigate to the Angular4Demo folder in command prompt and write ng serve to run project.

This command will compile your code and prepare browser for running application. Generally it will run on http://localhost:4200/. So navigate in browser.

If you want to modify port uses below mention command.

ng  serve --host 0.0.0.0 -port 4201

Now your application will run on http://localhost:4201/ .

It is very useful to create Angular 4 application using angular/cli as we can get well defined folder structure.

Navigate to src folder, you can find index.html file. You can change code in this flie and save, browser detects the changes and automatically reloads the page and you can find your change.

Summary

In this article, I discussed how to start angular 4 and create sample application using angular/cli. We also saw the basic commands of angular/cli to run application and how to change the default port of our angular application using angular/cli.