How to Install Angular 4 through the CLI

How to Install Angular 4 through the CLI

Angular 4 through the CLI:

 
If you prefer watching a video on How to Install Angular 4 through the CLI then see the video below, if not then follow this post for step-by-step details.
 

 
If you are new to Angular then you will be in a confusion that how you start an actual Angular 4 project, In this post, we will learn how to install Angular 4 through the CLI (Command Line Interface) from step by step with screenshots.

Step-1: First check that you have a few dependencies installed.

  • Node.js with NPM (Node Package Manager)
  • Angular-CLI (Command Line Interface)

How to check that Node.js installed or not, visit your console/command line and type:

If this command goes unrecognized, you need to install Node.js.

For installing Node.js in your pc:

  1. Visit the Node.js download page and choose either the Windows or Mac installer based on your OS.

Step-2 (Snapshot-1) After downloaded Node.js file you will see this window↓.

How to Install Angular 4 through the CLI

Snapshot-1

Step-3: (Snapshot-2) Accept the agreement, and click on Next Button.

How to Install Angular 4 through the CLI

Snapshot-2

Step-4: (Snapshot-3) choose an installation folder, and hit Next on this window.

How to Install Angular 4 through the CLI

Snapshot-3

Step-5: (Snapshot-4) By default, it will install the npm package manager which we will need most. Click on Next button.

How to Install Angular 4 through the CLI

Snapshot-4

Step-6: (Snapshot-5) Now click on Install button. after you click this button you will get a permission, click yes and follow next step.

How to Install Angular 4 through the CLI

Snapshot-5

Step-7: (Snapshot-6) Wait for few moments, it will take some time to install.

How to Install Angular 4 through the CLI

Snapshot-6

Step-8: (Snapshot-7) Now click on Finish button and follow next step.

How to Install Angular 4 through the CLI

Snapshot-7

Step-9: (Snapshot-8) Now open CMD and type node -v command and it will provide you with the current version number. You will get your version of Node.js. Mine is 8.9.4 like snapshot.

How to Install Angular 4 through the CLI Snapshot-8

Snapshot-8

Step-10: (Snapshot-9) Next, we need to install the Angular-CLI. This tool allows you to create Angular projects as well as help you with various development tasks. You will get more information in https://cli.angular.io , Now follow my next step.

How to Install Angular 4 through the CLI Snapshot-9

Snapshot-9

Step-11: (Snapshot-10) Now open CMD and type npm install -g @angular/cli command.

How to Install Angular 4 through the CLI Snapshot-10

Snapshot-10

it will take some time to finish.

Step-12: (Snapshot-11) Once finished, then type ng -v command and hit enter button on your keyboard. you will get your CLI version like snapshot.

How to Install Angular 4 through the CLI

Snapshot-11

Step-13: (Snapshot-12) Now we will learn how to create first project in Angular 4, what we do is open your CMD and type ng new your-project-name command. you will take any name which you want. Mine is my-first-project.

How to Install Angular 4 through the CLI

Snapshot-12

It will take some time to finish.

Step-14: Once finished, means you have created new Angular 4 project in your user folder. Now type cd your-project-name command, this is for open your project folder command.

After that, type ng serve command.

this command is working for start server for angular 4. means it is used for easily test your app locally while developing.

 

Step-15: (Snapshot-13) Once finished open your browser and type http://localhost:4200 , Now you will see this page. ↓

How to Install Angular 4 through the CLI

Snapshot-13

And there we go. Congratulations! you have installed Angular 4 in your pc and launced your first Angular 4 project.

You can use Visual Studio Code which is a file editor, to edit and modify any file in Angular 4. This is free.

If you face any difficulty implementing it in your pc or laptop, then you can contact to our developers team. Now you have the basic idea on How to Install Angular 4 through the CLI. Good luck with your project!

 

 

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

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