How to Install Angular CLI on RedHat/CentOS 7 in 9 Easy Steps

Table of Contents

How to Install Angular CLI

Also Read: 8 Popular Steps to Install Mono on RedHat/CentOS 7

Step 1: Prerequisites

a)You require a running RedHat/CentOS 7 System to proceed on this topic of how to install Angular CLI on RedHat/CentOS 7.

b)You must have sudo access to run privilege commands. You can check Step by Step: How to Add User to Sudoers on Ubuntu 18.04 to provide sudo access to User.

c)You need to have npm and node installed in your system. You can check Install NPM and Node.js in 6 Easy Steps on CentOS 7 to know more about npm and node installation.

Step 2: Update Your System

Firstly you need to update your system using yum -y update command as shown below. It is important to install latest updates before we go through the steps on how to install Angular CLI.

[root@localhost ~]# yum -y update
Loaded plugins: fastestmirror
Loading mirror speeds from cached hostfile
epel/x86_64/metalink | 7.2 kB 00:00:00
* base: mirrors.piconets.webwerks.in
* epel: mirror.xeonbd.com
* extras: mirrors.piconets.webwerks.in
* updates: mirrors.piconets.webwerks.in
base | 3.6 kB 00:00:00
download.mono-project.com_repo_centos_ | 2.9 kB 00:00:00
epel | 4.7 kB 00:00:00
extras | 2.9 kB 00:00:00
kubernetes/signature | 454 B 00:00:00
kubernetes/signature | 1.4 kB 00:00:00 !!!
nodesource | 2.5 kB 00:00:00
puppetlabs-pc1 | 2.5 kB 00:00:00
updates | 2.9 kB 00:00:00
(1/2): epel/x86_64/updateinfo | 1.0 MB 00:00:01
(2/2): epel/x86_64/primary_db | 6.8 MB 00:00:04
Resolving Dependencies
--> Running transaction check
---> Package NetworkManager.x86_64 1:1.18.0-5.el7_7.1 will be updated
---> Package NetworkManager.x86_64 1:1.18.0-5.el7_7.2 will be an update
---> Package NetworkManager-libnm.x86_64 1:1.18.0-5.el7_7.1 will be updated
---> Package NetworkManager-libnm.x86_64 1:1.18.0-5.el7_7.2 will be an update
---> Package NetworkManager-team.x86_64 1:1.18.0-5.el7_7.1 will be updated
---> Package NetworkManager-team.x86_64 1:1.18.0-5.el7_7.2 will be an update
---> Package NetworkManager-tui.x86_64 1:1.18.0-5.el7_7.1 will be updated
---> Package NetworkManager-tui.x86_64 1:1.18.0-5.el7_7.2 will be an update
---> Package binutils.x86_64 0:2.27-41.base.el7_7.1 will be updated
---> Package binutils.x86_64 0:2.27-41.base.el7_7.3 will be an update

Step 3: Check Node Version

You can check node version using node --version command. You need to check the node version to make sure when you check angular CLI version, it supports the current installed node version.

[root@localhost ~]# node --version
v13.7.0

Step 4: Check NPM Version

You can check NPM version by using npm --version command. You need to check the npm version to make sure when you check angular CLI version, it supports the current installed npm version.

[root@localhost ~]# npm --version
6.13.6

Step 5: Install Angular CLI

Now you can install Angular using npm install -g @angular/cli@latest command as shown below. Here option -g tells to install angular globally.

[root@localhost ~]# npm install -g @angular/cli@latest
npm WARN deprecated mkdirp@0.5.4: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
/usr/bin/ng -> /usr/lib/node_modules/@angular/cli/bin/ng

> @angular/cli@9.1.0 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 http://angular.io/analytics. No
+ @angular/cli@9.1.0
added 254 packages from 195 contributors in 47.057s

Step 6: Check Angular CLI Version

You can check Angular CLI Version using ng --version command as shown below. Once Angular web framework is installed, check Angular CLI version to make sure if the latest version is installed or not.

[root@localhost ~]# ng --version

    _                      _               ____ _    ___
   / \    _ __   __ _ _ _ | | __ _ _ __   / ___| |  |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__| | |   | |  | |
 / ___ \| | | | (_| | |_| | | (_| | |    | |__ | |_  | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|     \____|____|___|
                |___/

Angular CLI: 9.1.0
Node: 13.7.0
OS: linux x64

Angular:
...
Ivy Workspace:

Package Version
------------------------------------------------------
@angular-devkit/architect 0.901.0
@angular-devkit/core 9.1.0
@angular-devkit/schematics 9.1.0
@schematics/angular 9.1.0
@schematics/update 0.901.0
rxjs 6.5.4

Step 7: Create First Test Application

Now that Angular is installed in the System, we can create a test app using ng new angular-app command as shown below.

[root@localhost ~]# ng new angular-app
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE angular-app/README.md (1027 bytes)
CREATE angular-app/.editorconfig (274 bytes)
CREATE angular-app/.gitignore (631 bytes)
CREATE angular-app/angular.json (3606 bytes)
CREATE angular-app/package.json (1287 bytes)
CREATE angular-app/tsconfig.json (489 bytes)
CREATE angular-app/tslint.json (3125 bytes)
CREATE angular-app/browserslist (429 bytes)
CREATE angular-app/karma.conf.js (1023 bytes)
CREATE angular-app/tsconfig.app.json (210 bytes)
CREATE angular-app/tsconfig.spec.json (270 bytes)
CREATE angular-app/src/favicon.ico (948 bytes)
CREATE angular-app/src/index.html (296 bytes)
CREATE angular-app/src/main.ts (372 bytes)
CREATE angular-app/src/polyfills.ts (2835 bytes)
CREATE angular-app/src/styles.css (80 bytes)
CREATE angular-app/src/test.ts (753 bytes)
CREATE angular-app/src/assets/.gitkeep (0 bytes)
CREATE angular-app/src/environments/environment.prod.ts (51 bytes)
CREATE angular-app/src/environments/environment.ts (662 bytes)
CREATE angular-app/src/app/app-routing.module.ts (246 bytes)
CREATE angular-app/src/app/app.module.ts (393 bytes)
CREATE angular-app/src/app/app.component.css (0 bytes)
CREATE angular-app/src/app/app.component.html (25755 bytes)
CREATE angular-app/src/app/app.component.spec.ts (1074 bytes)
CREATE angular-app/src/app/app.component.ts (215 bytes)
CREATE angular-app/e2e/protractor.conf.js (808 bytes)
CREATE angular-app/e2e/tsconfig.json (214 bytes)
CREATE angular-app/e2e/src/app.e2e-spec.ts (644 bytes)
CREATE angular-app/e2e/src/app.po.ts (301 bytes)
✔ Packages installed successfully.
Directory is already under version control. Skipping initialization of git.

NOTE:

Please note that if you see any error during creation of an application then you need check your port and firewall services if it is blocking any Angular port or service. In the example I have flushed my iptables rules iptables -F command.

Step 8: Compile and Deploy Your Application

Now you can go inside angular-app directory and run ng serve command to compile and deploy your application as shown below. It is important to check angular cli version before you start deploying your applications.

[root@localhost ~]# cd angular-app/
[root@localhost angular-app]# ng serve
Compiling @angular/router/testing : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
You should check other entry-points in this package and set up a config to ignore any that you are not using.

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) 9.75 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.99 MB [initial] [rendered]
Date: 2020-04-02T00:49:51.208Z - Hash: 90ce8a0be3b70bf0bdbf - Time: 20227ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.

NOTE:

Please note that if you see any exception or error during compilation and deployment of your application, then try to first update Angular CLI using ng update command and then run ng serve command again.

Step 9: Check Server Response

Your application is now deployed to http://localhost:4200/ URL and it can be tested by using curl -i http://localhost:4200/ command. As you can see it gives Response Code of 200 which means resources are available. You can also verify the application in your browser by opening URL http://localhost:4200.

[root@localhost ~]# curl -i http://localhost:4200/
HTTP/1.1 200 OK
X-Powered-By: Express
Access-Control-Allow-Origin: *
Accept-Ranges: bytes
Content-Type: text/html; charset=UTF-8
Content-Length: 533
ETag: W/"215-quQSU6gwWAZ5uLhulZuw1+/nsu8"
Date: Thu, 02 Apr 2020 00:56:41 GMT
Connection: keep-alive

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="styles.js" type="module"></script><script src="vendor.js" type="module"></script><script src="main.js" type="module"></script></body>
</html>

I hope you liked this topic on How to Install Angular CLI on RedHat/CentOS 7. Please provide your feedback on Comment Box.

Also Read: 6 Easy Steps to Setup Offline two factor authentication in Linux

Cyberithub