23 C
Jaipur
Tuesday, October 20, 2020

How to install Angular JS on Ubuntu 20.04 LTS

Must read

Trisquel GNU/Linux 9.0 “Etiona” Released: A 100% Free Operating System

Trisquel GNU/Linux is one of the few operating systems endorsed and listed under “Free GNU/Linux Distributions” by the Free Software Foundation. This is because...

Raspberry Pi Compute Module 4 With New Form Factor Announced For $25

In a surprise move, Raspberry Pi Foundation has announced a new addition to its family of single board computers – Raspberry Pi Compute Module...

amazon app quiz: Amazon app quiz October 20, 2020: Get answers to these questions and win Echo smart speaker for free

Amazon app quiz is live now. As part of today’s quiz, the e-tailer is giving the participants a chance to win Amazon...

Angular is an open-source web application framework for building mobile and desktop web applications. It is written in TypeScript/JavaScript and was created in 2009 by Google. It is specially designed for building small to large scale applications from scratch. It comes with an Angular CLI utility that helps you to create, manage, build and test Angular applications.

In this tutorial, we will show you how to install Angular on Ubuntu 20.04.

Prerequisites

  • A server running CentOS 8.
  • A root password is configured on the server.

Install Node.js

Before starting, you will need to install Node.js and npm in your system. By default, the latest version of Node.js is not available in the Ubuntu 20.04 default repository. So you will need to add Node.js repository to your system.

First, add the Node.js repository with the following command:

curl -sL https://deb.nodesource.com/setup_14.x | bash -

Once added, install the Node.js with the following command:

apt-get install nodejs -y

Once installed, verify the installed version of Node.js with the following command:

node --version

You should see the following output:

v14.7.0

Next, update the npm version to the latest version by running the following command:

npm install [email protected] -g

Next, verify the npm version with the following command:

npm --version

You should get the following output:

6.14.7

Install Angular

You can install Angular using the npm as shown below:

npm install -g @angular/cli

Once installed, verify the installed version of Angular using the following command:

ng version

You should see the following output:

     _                      _                 ____ _     ___
    /    _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / ?  | '_  / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ | | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   __| |_|__, |__,_|_|__,_|_|       ____|_____|___|
                |___/
    

Angular CLI: 10.0.5
Node: 14.7.0
OS: linux x64

Angular: 
... 
Ivy Workspace: 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1000.5
@angular-devkit/core         10.0.5
@angular-devkit/schematics   10.0.5
@schematics/angular          10.0.5
@schematics/update           0.1000.5
rxjs                         6.5.5

Create Angular Project

At this point, Angular is installed in your system. It’s time to create a new project with Angular.

First, change the directory to /opt and create a new project named myproject with the following command:

cd /opt
ng new myproject

Next, change the directory to the myproject and serve the project with the following command:

cd myproject
ng serve --host your-server-ip --port 8088

You should see the following output:

WARNING: This is a simple server for use in testing or debugging Angular applications
locally. It hasn't been reviewed for security issues.

Binding this server to an open connection can result in compromising your application or
computer. Using a different host than the one passed to the "--host" flag might result in
websocket connection issues. You might need to use "--disableHostCheck" if that's the
case.
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/core : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/animations/browser/testing : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/common/http/testing : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015

chunk {main} main.js, main.js.map (main) 60.6 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.3 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.65 MB [initial] [rendered]
Date: 2020-08-09T14:10:36.644Z - Hash: a053188b5496361814a2 - Time: 14873ms
** Angular Live Development Server is listening on 69.87.218.220:8088, open your browser on http://69.87.218.220:8088/ **
: Compiled successfully.

Access Angular Web Interface

At this point, Angular project is deployed and listening on port 8088. You can access it using the URL http://your-server-ip:8088. You should see the following screen:

Conclusion

Congratulations! you have successfully installed Angular on Ubuntu 20.04. Now you can start deploying your first project with Angular. One of the great feature of Angular is webpack hot reloading that deploys the change on live and saves your lot of time.

Hitesh Jethva

About Hitesh Jethva

Over 8 years of experience as a Linux system administrator. My skills include a depth knowledge of Redhat/Centos, Ubuntu Nginx and Apache, Mysql, Subversion, Linux, Ubuntu, web hosting, web server, Squid proxy, NFS, FTP, DNS, Samba, LDAP, OpenVPN, Haproxy, Amazon web services, WHMCS, OpenStack Cloud, Postfix Mail Server, Security etc.

Source link

- Advertisement -

More articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest article

Trisquel GNU/Linux 9.0 “Etiona” Released: A 100% Free Operating System

Trisquel GNU/Linux is one of the few operating systems endorsed and listed under “Free GNU/Linux Distributions” by the Free Software Foundation. This is because...

Raspberry Pi Compute Module 4 With New Form Factor Announced For $25

In a surprise move, Raspberry Pi Foundation has announced a new addition to its family of single board computers – Raspberry Pi Compute Module...

amazon app quiz: Amazon app quiz October 20, 2020: Get answers to these questions and win Echo smart speaker for free

Amazon app quiz is live now. As part of today’s quiz, the e-tailer is giving the participants a chance to win Amazon...

Not only Samsung, Xiaomi too made fun of Apple over power adapter and EarPods

Apple's all-new iPhone 12 lineup will come without wall chargers and Lightning EarPods in the box. The company said that it's not including a...