Home / How To / How to install Angular JS on Ubuntu 20.04 LTS

How to install Angular JS on Ubuntu 20.04 LTS



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

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

conditions

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

Install Node.js

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

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

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

After adding, install 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

Then update the npm version to the latest version by running the following command:

npm install [email protected] -g

Then verify the npm version with the following command:

npm --version

You should get the following output:

6.14.7

Install angle

You can install Angular using the npm shown below:

npm install -g @angular/cli

After installing, verify the installed version of Angular with 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 angle projects

Angular is currently being installed on 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

Then change the directory to the middle project 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 angle interface

At this point, the Angular project is being distributed and listening to port 8088. You can access it using the URL http: // your-server-IP: 8088. The following screen is displayed:

Angle format JS project

Conclusion

Congratulations! you have installed Angular on Ubuntu 20.04. Now you can start distributing your first project with Angular. One of the great features of Angular is the web packaging reload that distributes the change live and saves a lot of time.

Hitesh Jethva

About Hitesh Jethva

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


Source link