Angular 5 Tutorial 02 – Creating Hello World Application

In this post, we are going to discuss how to setup development environment and create an initial angular app using CLI.

Whenever I’m creating a new application, I always prefer some standard folder structure or use file generator like Yeoman.

A quick start tool always helps the developer to save their valuable time and use those time efficient way on improving the quality of the application.

Angular provides us Angular CLI which is a command line interface tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

Using this CLI, we can create apps with a working condition which uses best practices suggested by Angular Team.

To create an Angular application using Angular CLI, all we need is to follow the below steps:

1. Install Node js and npm on your machine.

Visit Node.js web page and download installer. Once you’ve installed nodejs, the npm will get installed along with it.

2. Verify the compatible version

Angular CLI requires the minimal version of node 6.9.x and npm 3.x.x.

We can check the version of node and npm using following commands.

node -v

npm -v


3. Install Angular CLI

Run the following command to install Angular CLI globally.

npm install -g @angular/cli

-g flag is used to install the package globally in the npm.

Once we installed CLI globally, we can confirm whether the tool installed successfully by using the following command.

ng -v


4. Create a project

Now, creating a project becomes very simple. We have to run following command,

ng new cool-app

  • cool-app is the name of the project.



Once the files has been created, the CLI will start installing npm packages automatically. Wait until the packages getting installed, it will take a bit of time to complete the process.

The folder and file structure will looks as follows


5. Serve the application

Once the dependencies are installed, traverse to the created projected and serve the application using the following commands.

cd cool-app

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/.

The default page will get open with the greeting message.




Stay connected and Keep supporting. 🙂

Happy Coding!


In the next post, we can discuss the architecture of the angular application.

Few quick steps to learn core parts of angular 2+

Actually, there is no quick steps to learn any tools or technology unless we are interested or committed to goal of our learning curve.

I just added this title as a temporary one, nothing came up in my mind suddenly. so simply added.

I’m just going list down the various steps/core parts that should be covered in the learning curve of angular 2+

And the steps are,

Step 1
Learn how to install Node.js & npm, whats the purpose of it, and how to use it

Step 2
What is TypeScript? – classes, interfaces, objects

Step 3
Angular CLI – Understanding project structure/architecture, entry point of application

Step 4
Bootstraping, ngmodules, Angular dependency injection

Step 5
Data binding, Observables & Promises, Pipes, and event handling in application

Step 6
Navigation & Routing,

Step 7
Testing – Karma, Jasmine

Step 8
How to deploy your apps in server


I think these are some core parts that needs to learned for building a basic angular application. If you think something could be add up in this, please mention those in comment section.

I’m planning to write each steps in detail in upcoming posts. And the question arrives in my mind or probably some people mind in my network,

  • So this is another how to angular posts?
  • So same story, different post?
  • Before you complete these post, the next version will get release
  • Are people going to read these?

And the answer I tell to myself,

I write to practice my skills, experiment my knowledge, and so on. It makes me happy. So, lets do this.

Happy blogging!


P.S. I shall add posts on each steps mentioned above and link those topics to this posts.