How to install angular on Linux and Windows

Angular is a framework to build a client-side web application in HTML or javascript and Typescript. So here are steps to install the angular in Linux environment, in this example, I am installing angular on ubuntu distro but same can be used along with other distros as well.

Step 1. What is the pre-requesting to install the Angular?

Before installation of Angular, you should install the Node.js and Node package Manager ( npm ). So check the installation of Node.js and npm.

Use below command check the version of  Node.js, installed version should be at least 4.0.0.

$ node -v  
 v7.6.0 

Use below command to get the version of Node Package Manager (npm) it should be at least 3.0.0

$ npm -v  
 4.1.2 

If you are getting node or npm command not found the error,  that means Node.js not installed on your machine. So for installation of Node.js and npm check out our earlier tutorial about how to install Node.js on Linux.

For installation of Node.js on windows machine download the Node.js package from Nodejs.org official website and install as like you install the other application on windows.

Step 2. Install the AngularCLI

AngularCLI is the tool to work globally to create the app, install the dependency, to run the test HTTP server, etc. When you create the app using AngularCLI directory structure of your project will be created by default along with the configuration of testing environment like Karma. So use the below command to install the Angular CLI.

 sudo npm install -g @angular/cli  

For installation of Angular CLI on windows you can use the same command by just removing the sudo.

 

Step 3. Create the first Angular App

For creating the Angular app to test your installation use the below command from a terminal. We can use the same command in Linux as well as Windows.

 ng new myfirstapp 

Above command will take some time and create the directory structure as well as install any missing dependency. The output of the above command will look like as given below.

 installing ng  
  create .editorconfig  
  create README.md  
  create src/app/app.component.css  
  create src/app/app.component.html  
  create src/app/app.component.spec.ts  
  create src/app/app.component.ts  
  create src/app/app.module.ts  
  create src/assets/.gitkeep  
  create src/environments/environment.prod.ts  
  create src/environments/environment.ts  
  create src/favicon.ico  
  create src/index.html  
  create src/main.ts  
  create src/polyfills.ts  
  create src/styles.css  
  create src/test.ts  
  create src/tsconfig.app.json  
  create src/tsconfig.spec.json  
  create .angular-cli.json  
  create e2e/app.e2e-spec.ts  
  create e2e/app.po.ts  
  create e2e/tsconfig.e2e.json  
  create .gitignore  
  create karma.conf.js  
  create package.json  
  create protractor.conf.js  
  create tsconfig.json  
  create tslint.json  
 Installing packages for tooling via npm.  
 Installed packages for tooling via npm.  
 Project 'myfirstapp' successfully created.  

you can check the directory structure of your project by moving to the myfirstapp folder which was created by ng new command.

Step 4. Start the HTTP server and test your first project

Installation of the Angular are completed, we have created our first angular app in above steps now it's time to test the whole thing. So for testing, we can start the server using the below command by moving to your project folder.

 cd myfirstapp  
 ng serve  

Step 5. Open the browser and test the output

So by pointing your browser at address http://localhost:4200 you will get the output for which we are here " app Works".

Installation and testing of Angular have been completed. If you have any further queries or question on this feels free to post your comment below.

Step 6. Update Angular CLI Version

For updating the version of the CLI we have to follow the steps as given below.

First, uninstall the existing angular CLI if it is beta version 28 or older, it's required due to change in the name of package of angular CLI

Uninstall CLI

npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli

Next, Update the Angular Global and Local package of your project, for this follow the steps as given below.

Global Package Install

npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest 

Local Package Install

rm -rf node_modules dist ( In Window use alternate method to remove the compleate module)
npm install --save-dev @angular/cli@latest
npm install

Step 7. Change the default port to serve

To start the ng serve in custom port use the below command with host and port number.

ng serve --host 0.0.0.0 --port 4201