top

How to Install Angular on Ubuntu

Angular is an open-source, front-end web application development framework, it is TypeScript-based and led by the Angular Team at Google and by a community of individuals and corporations.In this document, we will cover installation procedure of angular on Ubuntu 16.04 operating systemPrerequisitesThis guide assumes that you are using Ubuntu16.04. Before you begin, you should have a user account with installation privileges and should have unrestricted access to all mentioned web sites in this document.Audience:This document can be referred by anyone who wants to install latest nodejs on Ubuntu 16.04System requirementsUbuntu 16.044 GB RAM10 GB free spaceInstallation ProcedureTo install angular cli we need nodejs and npm. First let’s understand what these are and why we need them.What is Nodejs and Why you need for angular development?Node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser. Node.js lets developers use JavaScript to develop wide variety of applications like network applications, command line tools, web api, web applications. You need nodejs for dev tooling (like local web server with live reloading features) and dev experience, you do not need nodejs to run react in production.What is npm and Why you need for angular development?Npm stands for node package manager, it is a dependency management tool for javascript applications. This tool will help to install the libraries and other tools to support angular development.Let’s start with nodejs installation post completion on nodejs we will install angular cli and create new angular project1.Install nodejs  - Setup PPATo get you a more recent version of Node.js installed on ubuntu is to add a PPA (personal package archive) maintained by NodeSource. Open terminal and run below commandscd ~ curl -sL https://deb.nodesource.com/setup_10.x -o nodesource_setup.shRun the downloaded script using below commandsudo bash nodesource_setup.shThe PPA will be added to your configuration and your local package cache will be updated automatically2.InstallRun sudo apt-get install nodejs -y to install3.Testing nodejs InstallationOn terminal run below command to test nodenode -vYou should see an output like below (Note: Your version may vary depending on your date of installing as nodejs team make an aggressive release but make sure your node version is >v10.0.0)On terminal run below command to test npmnpm -vYou should see an output like below (Note: Your version may vary depending on your date of installing as nodejs team make an aggressive release but make sure your npm version is  >5 )Install angular cliSetting up productive angular development environment would need to configure tools like typescript, webpack and other angular dependencies which are complex to configure for a newbie in angular world. There are several tools that help to alleviate this problem out of which angular cli is the easiest and finest tool with production grade configurations pre-built. Angular cli comes with wide range of commands that help manage the angular development, testing and build processWe will install angular cli using npm. On terminal run the install command shown belownpm install -g @angular/cliOn successful installation you should see the output like above (note your angular/cli version may be different by the time you run this install command)Test @angular/cliTo test the @angular/cli run ng version commandCongratulations, you have successfully installed @angular/cliRunning the first Hello World applicationCreate angular application using ng new command as shown belowThis command creates a new folder named hello-angular and creates all the files and setups the necessary libraries within this folder and makes the angular project ready to be executed without any additional configuration2.Once project is created change into project directory and run application using ng serve command as shown belowng serve -o command starts webpack development server which in turn performs all the build process and opens a browser window and loads application url which runs at http://localhost:4200 by default.On successful execution you should see the below output in browserAs discussed, angular cli comes with great tooling, one of the productive features is webpack hot reloading, which deploys the change on live and saves developer lot of time to redeploy and reload work.Let’s open the project and make some changes to see the experience of this great feature. We will go through the project structure to understand the importance of the files and folders createdOpen the project which was created in previous step in any JS editor, here you see the project is open in vscode editor. On to the left in explorer section you see file explorer which shows you several folders and files which were created by ng new command. Let’s walkthrough theme2e: this folder contains end to end testing source and configuration code. If you wish to write end to end testing automation code, you efforts go into this foldernode_modules: This folder is managed by package manager (npm) and contains all the project library dependencies. Files in this folder should not be modified as the changes made are not guaranteed to be safe as updating/installing any other library can overwrite the changes made.src: This is the folder that contains all your development effort. As a angular developer you spent lot of time in this folder creating modules, components, services, directive etc.,Other files that are outside src folder and configuration files for angular cli, editor, typescript, linting and npmNow let’s get into src folder. Within this folder there are several other folders likeapp – this folder contains all your source code, and this is the place all your development effort goesassets – contains the static asses to like images etc.,environments – contains the per environment configuration file which holds the settings to be used for dev/test and prod environmentsOther files are configuration files and settings.Out all files main.ts is the starting file and the project code execution starts from this file.Lets make a code change to the AppComponent, open app.component.html and make the changes as shown in below code Save the file and switch back to browser to see the changes deployed and loaded as discussed, this one of the features of angular cli tooling setup.  With new changes your browser window should look like belowCongrats!! You have setup an angular projectUninstall angular cliOn command prompt run npm uninstall -g @angular/cliUninstall nodejsOn terminal run below command to uninstall nodesudo apt remove nodejsRunning the first Hello World applicationOpen any text editor and write the following code console.log("Hello World Node!!")Save the file as helloworld.jsOpen command prompt and navigate to the folder where you save helloworld.js and  run below commandnode helloworld.jsHow it worksnode command line with file name as an argument will load, read, compile and execute the instructions from the file and execute them. Since we have one line of JS code which prints the text “Hello World Node” to console inside helloworld.js file you see the output as shown in above screenshot.
Rated 4.5/5 based on 22 customer reviews
Normal Mode Dark Mode

How to Install Angular on Ubuntu

Susan May
Tutorials
08th Feb, 2019
How to Install Angular on Ubuntu

Angular is an open-source, front-end web application development framework, it is TypeScript-based and led by the Angular Team at Google and by a community of individuals and corporations.

In this document, we will cover installation procedure of angular on Ubuntu 16.04 operating system

Prerequisites

This guide assumes that you are using Ubuntu16.04. Before you begin, you should have a user account with installation privileges and should have unrestricted access to all mentioned web sites in this document.

Audience:

This document can be referred by anyone who wants to install latest nodejs on Ubuntu 16.04

System requirements

  • Ubuntu 16.04
  • 4 GB RAM
  • 10 GB free space

Installation Procedure

To install angular cli we need nodejs and npm. First let’s understand what these are and why we need them.

What is Nodejs and Why you need for angular development?

Node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser. Node.js lets developers use JavaScript to develop wide variety of applications like network applications, command line tools, web api, web applications. You need nodejs for dev tooling (like local web server with live reloading features) and dev experience, you do not need nodejs to run react in production.

What is npm and Why you need for angular development?

Npm stands for node package manager, it is a dependency management tool for javascript applications. This tool will help to install the libraries and other tools to support angular development.

Let’s start with nodejs installation post completion on nodejs we will install angular cli and create new angular project

1.Install nodejs  - Setup PPA

  • To get you a more recent version of Node.js installed on ubuntu is to add a PPA (personal package archive) maintained by NodeSource. Open terminal and run below commands
cd ~
curl -sL https://deb.nodesource.com/setup_10.x -o nodesource_setup.sh

  • Run the downloaded script using below command
sudo bash nodesource_setup.sh

The PPA will be added to your configuration and your local package cache will be updated automatically

2.Install

  • Run sudo apt-get install nodejs -y to install

3.Testing nodejs Installation

  • On terminal run below command to test node
node -v

You should see an output like below (Note: Your version may vary depending on your date of installing as nodejs team make an aggressive release but make sure your node version is >v10.0.0)

  • On terminal run below command to test npm
npm -v

You should see an output like below (Note: Your version may vary depending on your date of installing as nodejs team make an aggressive release but make sure your npm version is  >5 )

Install angular cli

Setting up productive angular development environment would need to configure tools like typescript, webpack and other angular dependencies which are complex to configure for a newbie in angular world. There are several tools that help to alleviate this problem out of which angular cli is the easiest and finest tool with production grade configurations pre-built. Angular cli comes with wide range of commands that help manage the angular development, testing and build process

We will install angular cli using npm. On terminal run the install command shown below

npm install -g @angular/cli

On successful installation you should see the output like above (note your angular/cli version may be different by the time you run this install command)

Test @angular/cli

To test the @angular/cli run ng version command

Congratulations, you have successfully installed @angular/cli

Running the first Hello World application

  1. Create angular application using ng new command as shown below

This command creates a new folder named hello-angular and creates all the files and setups the necessary libraries within this folder and makes the angular project ready to be executed without any additional configuration

2.Once project is created change into project directory and run application using ng serve command as shown below

ng serve -o command starts webpack development server which in turn performs all the build process and opens a browser window and loads application url which runs at http://localhost:4200 by default.

On successful execution you should see the below output in browser

As discussed, angular cli comes with great tooling, one of the productive features is webpack hot reloading, which deploys the change on live and saves developer lot of time to redeploy and reload work.

Let’s open the project and make some changes to see the experience of this great feature. We will go through the project structure to understand the importance of the files and folders created

Open the project which was created in previous step in any JS editor, here you see the project is open in vscode editor. On to the left in explorer section you see file explorer which shows you several folders and files which were created by ng new command. Let’s walkthrough them

e2e: this folder contains end to end testing source and configuration code. If you wish to write end to end testing automation code, you efforts go into this folder

node_modules: This folder is managed by package manager (npm) and contains all the project library dependencies. Files in this folder should not be modified as the changes made are not guaranteed to be safe as updating/installing any other library can overwrite the changes made.

src: This is the folder that contains all your development effort. As a angular developer you spent lot of time in this folder creating modules, components, services, directive etc.,

Other files that are outside src folder and configuration files for angular cli, editor, typescript, linting and npm

Now let’s get into src folder. Within this folder there are several other folders like

app – this folder contains all your source code, and this is the place all your development effort goes

assets – contains the static asses to like images etc.,

environments – contains the per environment configuration file which holds the settings to be used for dev/test and prod environments

Other files are configuration files and settings.

Out all files main.ts is the starting file and the project code execution starts from this file.

Lets make a code change to the AppComponent, open app.component.html and make the changes as shown in below code 

Save the file and switch back to browser to see the changes deployed and loaded as discussed, this one of the features of angular cli tooling setup.  

With new changes your browser window should look like below

Congrats!! You have setup an angular project

Uninstall angular cli

  • On command prompt run npm uninstall -g @angular/cli

Uninstall nodejs

  • On terminal run below command to uninstall node
sudo apt remove nodejs


Running the first Hello World application

  • Open any text editor and write the following code 
console.log("Hello World Node!!")
  • Save the file as helloworld.js
  • Open command prompt and navigate to the folder where you save helloworld.js and  run below command
node helloworld.js

How it works

node command line with file name as an argument will load, read, compile and execute the instructions from the file and execute them. Since we have one line of JS code which prints the text “Hello World Node” to console inside helloworld.js file you see the output as shown in above screenshot.

Susan

Susan May

Writer, Developer, Explorer

Susan is a gamer, internet scholar and an entrepreneur, specialising in Big Data, Hadoop, Web Development and many other technologies. She is the author of several articles published on Zeolearn and KnowledgeHut blogs. She has gained a lot of experience by working as a freelancer and is now working as a trainer. As a developer, she has spoken at various international tech conferences around the globe about Big Data.


Website : https://www.zeolearn.com

Leave a Reply

Your email address will not be published. Required fields are marked *

SUBSCRIBE OUR BLOG

Follow Us On

Share on

other Blogs