Home » JavaScript » Angular.js » Angular 4 Installation

About Ramesh Kotha

Ramesh is a certified Java professional working in financial domain, He is an application developer and has hands on practice with Java and related technologies. He is passionate about Spring and other open source technologies.

Angular 4 Installation

Angular 4 Framwork

Welcome to Angular, it is faster, most powerfull framework. And it’s SPA(single page application),

it will use only one index.html, whatever you use all  htmls will come under this index.html body tag.

Topic: Angular 4 installation:

In this section we will learn, How to install the angular 4 in your system.
you will see the basic angular 4 program in Type script.

Angular 4 installation:

-> Install Node.js
First you need to install the node.js in your system to get the access of use npm commands.

i)Download it from below website.

ii)Setup node.js exe file with ‘npm package manager’. After installation done
Verify that you are running node v4.x.x or higher and npm 3.x.x or higher by running the commands node -v and npm -v in a terminal/console window. other below versions will produce errors.

iii)Download the visual studio for better writing angular code from below website.

-> Install the Angular CLI Globally.

You need to install the angular cli to use the ng command. It will use to create the angular project.

npm install -g @angular/cli

-> Creating a Angular Project

i) Open a terminal window. Generate a new project by running the below command:

ng new ‘YourProjectName’

It takes some time to create the project. you need to download the npm packages.

with this below command.
npm install

you will see the node-modules folder above src folder of your project.
-> Serve the application

Go to the project directory and launch the server.

cd AngularApp // my-app is your project name
ng serve –open

The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files.

Using the –open (or just -o) option will automatically open your browser on http://localhost:4200/.

Your app greets you with a message:

app works!

Your project structure

Published on Web Code Geeks with permission by Ramesh Kotha, partner at our WCG program. See the original article here: Angular 4

Opinions expressed by Web Code Geeks contributors are their own.

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!


1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook


and many more ....


I have read and agree to the terms & conditions


Notify of

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Inline Feedbacks
View all comments