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

WordPress Android App with REST API And Retrofit

Retrofit is the library which converts your JSON data into Java object. In this tutorial, we will learn about how to implement the Retrofit to create a WordPress Mobile App. As we all know, WordPress is the one of the biggest CMS (Content Management System) of the world. Wordpress full fill the requirements for all most every type of the website. So, in this tutorial, I am going to learn how to create an Android App using the WordPress REST API and Retrofit. What is Retrofit? If you want to know about Retrofit, I would like to give you just a simple one-line explanation of the Retrofit. It is a library which converts your REST HTTP request to Java interface. We will learn how we can do all these stuff using some very simple steps. Further, you can check the Retrofit Library here . So, In this tutorial, we will use the Retrofit to retrieve all post and there except ( A short Description of Post) form a WordPress website. Prerequisite for using the Retrofit for WordPress Android App Ther

How to Read and Write JSON data in Kotlin with GSON

Kotlin is now official language for Android development and it is well supported in Android Studio. So here in this tutorial, we are going to learn about how to read and write JSON data in Kotlin using GSON. If you would like to learn the java version of this tutorial check out the last tutorial " How to Read and Write JSON data using GSON ". Introduction In this tutorial, we will write two methods. In the first method, we will create a JSON file and in second method we will read the file and print in a text box.  If you like to know more about the basic entity of JSON you can check out Basic JSON entity here . What is JSON? JSON stands for J ava S cript O bject N otation JSON is a lightweight data-interchange format It is "self-describing" and easy to understand JSON is language independent and can we used in any language JSON Syntax Rules Data is in name/value pairs Data is separated by commas Curly braces hold objects Square brackets hold