Skip to main content

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  

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

$ npm -v  

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

Install Angular in linux

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 --port 4201



  1. […] Angular is best suited for Single Page App (SPA), for getting started with Angular we need to setup the development environment first. So for setting the development for Angular please check out the earlier post for same for Getting Started with  Angular. […]

  2. http://localhost:4200 does not work. When you open a browser, you open it on a windows computer. So localhost does not point to the linux server where myfirstapp is created. I changed localhost to the IP address of the linux server. But I got the following error:

    This site can’t be reached refused to connect.

    where is the ip address of my linux server.

    How to fix this?

  3. check the ip and port from the output of ng serve command


Post a Comment

Popular posts from this blog

Flutter How to Start Android Activity from Flutter View

Flutter and Dart is an excellent combination for creating the UI, but for accessing the platform-specific service we need to open platform-specific activity. So lets in this article we will explore how to start an android activity and access the service from Flutter View. Create a Project for this Android Activity Flutter View Demo Create a Project From File menu select the New Flutter Project Enter the project name Select the AndroidX support and click on next After the above, we step click on Finish We will have the following project structure created. Create the Second Activity in Android Just go to the android folder and open it in separate windows. We will have the following project structure. Create the Activity Just right-click on the Kotlin folder and create a blank activity from the menu. If you create the activity then you may be required to upgrade the Gradle and do some import. So Just click on update and wait for the project s

Kotlin Parcelable Array Objects Send To Activity

We know that IPC (Inter Process Communication) between the activity is an extremely important part of any application development. We often required that we need to send some data to other activity. For example, we may be required to send an array of data, data could be an Integer, String, Long, Double, Float or any other custom data objects. So, In this example, we are going to learn how to implement the Kotlin Parcelable Array object to send the data from one activity to second activity. What is Parcel? The parcel class is designed as a high-performance IPC transport. A Parcel can contain both flattened data that will be unflattened on the other side of the IPC, and references to live IBinde r objects that will result in the other side receiving a proxy IBinder connected with the original IBinder in the Parcel. Create Kotlin Parcelable Array Objects Parcelable is API for placing the arbitrary objects into the Parcel. In Actual in android app development, Parcelable is an interface

Scan and List All Available WiFi Network In Android

In this tutorial, we learn how to connect to a WiFi hotspot in android by code. In this Demo we will create an as small app which will scan the all available network or Hotspot and list down the network when you select specific network, the application will connect that particular network. You May Like Below Topic: How to Read and Write JSON data using GSON WP Android App using REST and volley WP Android App using REST and volley part2 Implementation of SwipeRefreshLayout in RecyclerView Create Amazing Bottom Navigation Bar Without Any External Library Introduction In this tutorial, we learn how to connect to a WiFi hotspot in android by code. In this Demo we will create an as small app which will scan the all available network or Hotspot and list down the network when you select specific network, the application will connect that particular network. We will add this functionality to our existing Demo app " Video Gallery ". If you would like to check out t