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


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


 

Comments

  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. […]

    ReplyDelete
  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
    xx.xxx.xx.xx refused to connect.

    where xx.xxx.xx.xx is the ip address of my linux server.

    How to fix this?

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

    ReplyDelete

Post a Comment

Popular posts from this blog

Flutter Theme Creation, Programmatic Way

Flutter and Dart is an excellent combination for creating the mobile app with material design with nice GUI. Its lots of widget which help the developer for creating the app UI very fast with respect to the other language. You may face some problem in starting due to comm, curly brace and semicolon but after some time you will find the way how to work with these all stuff and it becomes very easy for you. But in this article, we are not going to discuss all these. In this article, we will handle a very interesting topic on how to create a custom theme or multiple themes and let's user decide which theme to use.



Create a flutter project



So let's create a flutter project by selecting the appropriate option from the File menu in android studio or Visual Code. If you are new to Flutter and Dart you can check out our recent post to get started Creating Cross-platform app using flutter.



Once your project is created you will get the default counter app and you try running the app in the…

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 sync completed.
Update the project build config …

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
There is s…