Steps to Setup Angular on Ubuntu 20.04 LTS

In this blog we are discussing how to setup Angular on Ubuntu 20.04. Angular is a free & open source web-based application. It provides frameworks, libraries, assets, and utilities.It is used to create mobile and desktop applications.

There are some steps to setup Angular on Ubuntu:

Step 1: Update the System.

apt-get update

Step 2: Install Node.js on system.

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
apt install nodejs

  • Here is the command output.

root@ip-172-31-23-255:/home/ubuntu# curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
## Installing the NodeSource Node.js 14.x repo...
## Populating apt-get cache...
+ apt-get update
Hit:1 http://sa-east-1.ec2.archive.ubuntu.com/ubuntu focal InRelease
Hit:2 http://sa-east-1.ec2.archive.ubuntu.com/ubuntu focal-updates InRelease
Hit:3 http://sa-east-1.ec2.archive.ubuntu.com/ubuntu focal-backports InRelease
0% [Connecting to security.ubuntu.com (91.189.88.152)]
Hit:4 http://security.ubuntu.com/ubuntu focal-security InRelease
Reading package lists... Done
## Confirming "focal" is supported...
+ curl -sLf -o /dev/null 'https://deb.nodesource.com/node_14.x/dists/focal/Release'
.....
root@ip-172-31-23-255:/home/ubuntu# apt install nodejs
Reading package lists... Done
Building dependency tree
Reading state information... Done
The following NEW packages will be installed:
nodejs
0 upgraded, 1 newly installed, 0 to remove and 37 not upgraded.
Need to get 25.1 MB of archives.
After this operation, 122 MB of additional disk space will be used.
Get:1 https://deb.nodesource.com/node_14.x focal/main amd64 nodejs amd64 14.18.3-deb-1nodesource1 [25.1 MB]
Fetched 25.1 MB in 0s (57.2 MB/s)
Selecting previously unselected package nodejs.
(Reading database ... 63895 files and directories currently installed.)
Preparing to unpack .../nodejs_14.18.3-deb-1nodesource1_amd64.deb ...
Unpacking nodejs (14.18.3-deb-1nodesource1) ...
Setting up nodejs (14.18.3-deb-1nodesource1) ...
Processing triggers for man-db (2.9.1-1) ...

  • Check Node & NPM version.

node --version
&&
npm --version

  • Here is the command output.

root@ip-172-31-23-255:/home/ubuntu# node --version
v14.18.3
root@ip-172-31-23-255:/home/ubuntu# npm --version
6.14.15

Step 3: Install latest Angular on system.

npm install -g @angular/cli

Other Version:

npm install -g @angular/cli@10  ## For Angular 10
npm install -g @angular/cli@11   ## For Angular 11
npm install -g @angular/cli@12 ## For Angular 12

  • Here is the command output.
  • Type y.

root@ip-172-31-23-255:/home/ubuntu# npm install -g @angular/cli
/usr/bin/ng -> /usr/lib/node_modules/@angular/cli/bin/ng.js
> @angular/[email protected] postinstall /usr/lib/node_modules/@angular/cli
> node ./bin/postinstall/script.js
? Would you like to share anonymous usage data with the Angular Team at Google under
Google’s Privacy Policy at https://policies.google.com/privacy? For more details and
how to change this setting, see https://angular.io/analytics. Yes
+ @angular/[email protected]
added 183 packages from 134 contributors in 32.577s

  • Check Angular version.

ng --version

  • Here is the command output.

Step 4: Create a Application.

ng new hello-angular

  • Here is the command output.
  • By default,CSS style sheet is selected.

root@ip-172-31-23-255:/home/ubuntu# ng new hello-angular
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? (Use arrow keys)
❯ CSS
SCSS [ https://sass-lang.com/documentation/syntax#scss ]
Sass [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
Less [ http://lesscss.org

  • Press Enter.

root@ip-172-31-23-255:/home/ubuntu# ng new hello-angular
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE hello-angular/README.md (1058 bytes)
CREATE hello-angular/.editorconfig (274 bytes)
CREATE hello-angular/.gitignore (548 bytes)
CREATE hello-angular/angular.json (3081 bytes)
CREATE hello-angular/package.json (1077 bytes)
CREATE hello-angular/tsconfig.json (863 bytes)
CREATE hello-angular/.browserslistrc (600 bytes)
CREATE hello-angular/karma.conf.js (1430 bytes)
CREATE hello-angular/tsconfig.app.json (287 bytes)
CREATE hello-angular/tsconfig.spec.json (333 bytes)
CREATE hello-angular/.vscode/extensions.json (130 bytes)
CREATE hello-angular/.vscode/launch.json (474 bytes)
CREATE hello-angular/.vscode/tasks.json (938 bytes)
CREATE hello-angular/src/favicon.ico (948 bytes)
CREATE hello-angular/src/index.html (298 bytes)
CREATE hello-angular/src/main.ts (372 bytes)
CREATE hello-angular/src/polyfills.ts (2338 bytes)
CREATE hello-angular/src/styles.css (80 bytes)
CREATE hello-angular/src/test.ts (745 bytes)
CREATE hello-angular/src/assets/.gitkeep (0 bytes)
CREATE hello-angular/src/environments/environment.prod.ts (51 bytes)
CREATE hello-angular/src/environments/environment.ts (658 bytes)
CREATE hello-angular/src/app/app-routing.module.ts (245 bytes)
CREATE hello-angular/src/app/app.module.ts (393 bytes)
CREATE hello-angular/src/app/app.component.css (0 bytes)
CREATE hello-angular/src/app/app.component.html (23364 bytes)
CREATE hello-angular/src/app/app.component.spec.ts (1094 bytes)
CREATE hello-angular/src/app/app.component.ts (217 bytes)
✔ Packages installed successfully.
Successfully initialized git.

  • Change the directory & Serve the Angular application.

cd hello-angular
ng serve

  • Here is the command output.

root@ip-172-31-23-255:/home/ubuntu/hello-angular# ng serve
✔ Browser application bundle generation complete.
Initial Chunk Files | Names | Raw Size
vendor.js | vendor | 2.00 MB |
polyfills.js | polyfills | 339.20 kB |
styles.css, styles.js | styles | 212.51 kB |
main.js | main | 53.21 kB |
runtime.js | runtime | 6.86 kB |
| Initial Total | 2.60 MB
Build at: 2022-01-21T09:10:34.494Z - Hash: 4e62ec239dc6908b - Time: 18667ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
✔ Compiled successfully.

  • We can access angular application on localhost port 4200,Which is the default host and port used by Angular application.

http://localhost:4200

  • If we want to change the Host & port number of running application so run the following command.
  • 0.0.0.0 listen all the interfaces.

Syntax:

ng serve --host host-ip --port port-number

Example:

ng serve --host 0.0.0.0 --port 8080

  • Here is the command output.

root@ip-172-31-23-255:/home/ubuntu/hello-angular# ng serve --host 0.0.0.0 --port 8080
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 "--disable-host-check" if that's the
case.
✔ Browser application bundle generation complete.
Initial Chunk Files | Names | Raw Size
vendor.js | vendor | 2.00 MB |
polyfills.js | polyfills | 339.20 kB |
styles.css, styles.js | styles | 212.51 kB |
main.js | main | 53.21 kB |
runtime.js | runtime | 6.86 kB |
| Initial Total | 2.60 MB
Build at: 2022-01-21T09:13:10.420Z - Hash: 4e62ec239dc6908b - Time: 14325ms
** Angular Live Development Server is listening on 0.0.0.0:8080, open your browser on http://localhost:8080/ **
✔ Compiled successfully.

Step 5: Open Angular Application Web Interface

http://server-ip:8080

  • Here is the output.

Leave a Reply