Creating Your First Angular 4 Application

Introduction

In this article, we will learn how we can create our first Angular 4 application or Installation of angular 4 or upgrade exisitng angular 2 application to angular 4 application. Let's see step by step.
 
Step 1

Install Angular-CLI, To Install Angular-CLI, you can use the command given below.
  • First, install NodeJS from https://nodejs.org/.
  • Now, open command prompt and install Angular-CLI, using command given below.
    1. npm install -g angular-cli  
 
 
Step 2

Now, create Angular project. The syntax is given below.
  1. ng new <project_name>  
 
 
Now, go inside MyProject, using cd <project_name>.
 
Now, if we see our project version, then we will get to know that this project is Angular2 project. Just type ng -v.
 
 
 
Step 3
 
Updating to 4.0.0

Updating to 4 is as easy as updating your Angular dependencies to the latest version and double checking, if you want animations. This will work for most use cases.  
  • On Linux/Mac
    1. npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest --save   
  • On Windows
    1. npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest --save  
Now, again check Angular version, using ng -v command.



Finally, you can run your project, using ng serve.



Now, run the Application in the Browser with the URL http://localhost:4200. The output is shown below.