web stats

Installation Angular 4 with Angular CLI

What is Angular 4? I f you have worked in Angular 2, you should know that Angular 2 was totally a different kind of framework than Angular 1.

Angular 1 was based on MVC. We need to do our two-way binding. Angular 2 was totally based on component. We need to create a component many times.

Angular 4 is the same concept as Angular 2. It is not a much of a different than Angular 2. It is slightly better in performance than Angular 2. It will be the same structure and same things. We create components, we create directives, we create services in Angular 4 just like Angular 2.

In this post I will be taking you through all the core concepts before starting working with Angular 4.

We will use Angular CLI. Angular CLI contains a bunch of commands in order to work with Angular 4 project.

Firstly you need to have npm installed in your computer. Npm is means node package manager. If you will install nodejs, npm will automatically be installed in your computer. You can install nodejs here

I’m using Visual Studio Code IDE for developing Angular application. You can download and install this IDE for here.

Open new folder named Angular4(or another, not important) and open CMD in here (click right button with shift)

We need to check if the node js installed in our computer or not.

For for this write to CMD node -v

It’s going to show us the version of node js. (v6.10.3 version installed)

Then write to cmd npm -v (3.10.10 version installed)

Now we going to go It is going to show us a few commands that we need to run in order to install Angular CLI. Angular CLI will help us to create and manage our Angular projects.

Write these commands

npm install -g @angular/cli
ng new my-dream-app
cd my-dream-app
ng serve

1. npm install -g @angular/cli (it’s going to take a few minutes depends upon your computer’s performans)
-g is means that Angular CLI has been installed globally in our computer. We don’t need to install Angular CLI in every project. If you don’t write -g, Angular CLI wil be installed in a specific folder.

2. ng new my-dream-app

We need to create our project. In order to create our project, we need to use this command. Our project’s name is my-dream-app. You can change this name if you want.

3. cd my-dream-app
Inside the our project directory.

4. ng serve

Now our project has been created. We need to start our application. Write to cmd ng serve

Go browser and write localhost:4200, Application has been started 🙂

If you want to change port number, you should use this code.

ng serve –host –port 4201 (write desired port number)

You may also like...

1 Response

Leave a Reply

Your email address will not be published. Required fields are marked *