Running First Angular-CLI Project in 2 Minutes

Running First Angular-CLI Project in 2 Minutes:

Now we are going to see how to run first angular-cli project. It just takes 2 minutes to run and see our first project output in browser.

 

Prerequisite:

1. NodeJS should be installed
2. Angular-CLI should be installed

 

If you did not install both or any one of the above refer the below links for installation  steps and guides:

Installing NodeJS in Windows 10:

 

 

 

Installing NodeJS in Windows 7:

 

 

Installing angular-cli: [for both windows 7 and windows 10]

 

 

 

Step 1: Create a Project folder

Create a folder named “angular-cli” in C drive and navigate to this folder(angular-cli) in command prompt and run the below command:

 

ng new my-first-angular-cli-app

This command creates a folder “my-first-angular-cli-app” under angular-cli folder and generates all the files.

 

 

 

angular-cli generating all the required necessary files:

 

 

Now it’s completed it’s generation of required files:

 

 

 

Step 2: Go to my-first-angular-cli-app folder and run

Command to run angular-cli app:

ng serve

 

 

To read other useful and must to know commands about angular-cli refer the below post:

 

 

Now the compilation completed:

 

 

Step 3: Open http://localhost:4200 in browser

Default post of angular-cli is 4200, so you will be able to see your first app output in http://localhost:4200,

 

 

if at all you get port is alreay in use error then run the below command to resolve it.

ng serve –port 14123

now you can view your output in http://localhost:14123

 

 

We have successfully viewed our first output in angular-cli.

 

Sharing few more details below to make you understand better about how angular-cli works.

Go this folder and view the list of files generated by angular-cli:

C:\angular-cli\my-first-angular-cli-app

 

 

 

Here few important details you should know is:

• node_modules will have all the dependencies like styles, scripts to tell few.
• angular-cli.json is important configuration file in angular-cli. Remember angular-cli come up with live reload feature, which is nothing but once you do save on any component, module files then reflection happens instantly without doing any manual restart of development servers. But if you make any changes in angular-cli.json file then it is mandatory to restart the server to view the changes.
• src -> app folder will have all module and component files generated.

 

Go to src -> app

 

I am going to edit app.component.ts:

 

title = ‘app works!’;  => title = ”Hello World!’;

 

 

After I save the file, angular-cli builds it automatically and reload the output lively without doing any server restart.

 

Automatically compilation happened on click of save :

 

 

 

Browser reflects the changes:

 

Hope you enjoyed this post. Feel free to write your thoughts/comments/suggestions to improve our posts!