Table of Contents
In this article, I will take you through the steps on How to Install Angular CLI on RedHat/CentOS 7 in 9 Easy Steps. How to Install Angular CLI on RedHat/CentOS 7. How to Install Angular CLI. on RedHat/CentOS 7. How to Install Angular CLI on RedHat/CentOS 7 . It is basically a web framework to automate your tasks. Angular CLI features was added from Version 6. Before you go on How to Install Angular CLI on RedHat/CentOS 7 it is important for you to understand npm and node topics.
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:
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:
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