October 21, 2021
How to install Angular on CentOS 8

How To Install Angular On CentOS 8

On this article we will discuss how to install the latest Angular on Linux CentOS 8 opearting system and setting up the local environment and workspace.



Introduction

Angular is a TypeScript-based open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS. On this tutorial we will install the latest Angular version version 11.1.4 which was released on 3 February 2021.

The Angular installation will be consist of serveral steps, namely :

  1. Prerequisite
  2. Install Angular CLI on CentOS 8
  3. Create Workspace and Run Initial Application

1. Prerequisite

Angular requires Node.js and npm to run properly on the system. Angular requires current, active LTS, or maintenance LTS version of Node.js. If our CentOS 8 system has not Node.js installed yet, we have to install it first. For Node.js installation on CentOS 8, we could find it on How To Install Node.js version 14 On CentOS 8 article. Angular, the Angular CLI, and Angular applications depend on npm packages for many features and functions. To download and install npm packages, we need an npm package manager.

On this step we will verify the Node.js and npm version which are installed on the system, by submitting command line : node --version and npm --version.

[ramans@otodiginet ~]$ node --version
 v14.15.0
 [ramans@otodiginet ~]$ npm --version
 6.14.8
Node.js version and npm versin
Node.js version and npm versin

2. Install the Angular CLI

After all prerequisites are fulfilled, the we do the Angular CLI installatin. We use the Angular CLI to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment. To install the latest Angular CLI, we submit the command line : sudo npm install -g @angular/cli. If we want to install any other Angular version just hit the command : sudo npm install -g @angular/cli@10 for Angular version 10, sudo npm install -g @angular/cli@9 for Angular version 9.

[ramans@otodiginet ~]$ sudo npm install -g @angular/cli
 [sudo] password for ramans: 
 npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
 npm WARN deprecated har-validator@5.1.5: this library is no longer supported
 /usr/bin/ng -> /usr/lib/node_modules/@angular/cli/bin/ng
   @angular/cli@11.1.4 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. Yes
 @angular/cli@11.1.4
 added 234 packages from 182 contributors in 104.641s 
Angular CLI Install on CentOS 8
Angular CLI Install on CentOS 8

After installation was completed done, then we will verify it by querying its version, by submitting command line : ng --version.

[ramans@otodiginet ~]$ ng --version
Angular CLI version 11.1.4
Angular CLI version 11.1.4



3. Create Workspace and Running the Initial Application

On this section, we will create a workspace and initial starter app. For this purpose we will provide a name called angularotodigi.

  1. Submit the command line : ng new angularotodigi
  2. The ng new command will prompt the information about features to include in the initial app. Accept the defaults by pressing the Enter or Return key.
[ramans@otodiginet ~]$ ng new angularotodigi
 ? Do you want to enforce stricter type checking and stricter bundle budgets in the workspace?
   This setting helps improve maintainability and catch bugs ahead of time.
   For more information, see https://angular.io/strict Yes
 ? Would you like to add Angular routing? Yes
 ? Which stylesheet format would you like to use? CSS
 CREATE angularotodigi/README.md (1023 bytes)
 CREATE angularotodigi/.editorconfig (274 bytes)
 CREATE angularotodigi/.gitignore (631 bytes)
 CREATE angularotodigi/angular.json (3687 bytes)
 CREATE angularotodigi/package.json (1204 bytes)
 CREATE angularotodigi/tsconfig.json (783 bytes)
 CREATE angularotodigi/tslint.json (3185 bytes)
 CREATE angularotodigi/.browserslistrc (703 bytes)
 CREATE angularotodigi/karma.conf.js (1431 bytes)
 CREATE angularotodigi/tsconfig.app.json (287 bytes)
 CREATE angularotodigi/tsconfig.spec.json (333 bytes)
 CREATE angularotodigi/src/favicon.ico (948 bytes)
 CREATE angularotodigi/src/index.html (300 bytes)
 CREATE angularotodigi/src/main.ts (372 bytes)
 CREATE angularotodigi/src/polyfills.ts (2830 bytes)
 CREATE angularotodigi/src/styles.css (80 bytes)
 CREATE angularotodigi/src/test.ts (753 bytes)
 CREATE angularotodigi/src/assets/.gitkeep (0 bytes)
 CREATE angularotodigi/src/environments/environment.prod.ts (51 bytes)
 CREATE angularotodigi/src/environments/environment.ts (662 bytes)
 CREATE angularotodigi/src/app/app-routing.module.ts (245 bytes)
 CREATE angularotodigi/src/app/app.module.ts (393 bytes)
 CREATE angularotodigi/src/app/app.component.css (0 bytes)
 CREATE angularotodigi/src/app/app.component.html (25757 bytes)
 CREATE angularotodigi/src/app/app.component.spec.ts (1081 bytes)
 CREATE angularotodigi/src/app/app.component.ts (218 bytes)
 CREATE angularotodigi/e2e/protractor.conf.js (904 bytes)
 CREATE angularotodigi/e2e/tsconfig.json (274 bytes)
 CREATE angularotodigi/e2e/src/app.e2e-spec.ts (665 bytes)
 CREATE angularotodigi/e2e/src/app.po.ts (274 bytes)
 ✔ Packages installed successfully.
 *** Please tell me who you are.
 Run
 git config --global user.email "you@example.com"
   git config --global user.name "Your Name"
 to set your account's default identity.
 Omit --global to set the identity only in this repository.
 fatal: unable to auto-detect email address (got 'ramans@otodiginet.(none)')
Create new Angular Workspace
Create new Angular Workspace

3. Run the application. After a workspace is created, then we will run the initial application. This task is done by submitting command line : ng serve --open inside a new workspace directory (/home/ramans/angulaotodigi).

[root@otodiginet ramans]# cd angularotodigi
[root@otodiginet angularotodigi]# ng serve --open
 Compiling @angular/core : es2015 as esm2015
 Compiling @angular/common : es2015 as esm2015
 Compiling @angular/platform-browser : es2015 as esm2015
 Compiling @angular/router : es2015 as esm2015
 Compiling @angular/platform-browser-dynamic : es2015 as esm2015
 ✔ Browser application bundle generation complete.
 Initial Chunk Files | Names         |      Size
 vendor.js           | vendor        |   2.68 MB
 polyfills.js        | polyfills     | 127.60 kB
 main.js             | main          |  58.02 kB
 runtime.js          | runtime       |   6.15 kB
 styles.css          | styles        | 119 bytes
                 | Initial Total |   2.87 MB
 Build at: 2021-02-10T02:34:46.791Z - Hash: bb47342b5c3a8a4da46b - Time: 15235ms
 ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
 ✔ Compiled successfully.
 ✔ Browser application bundle generation complete.
 Initial Chunk Files | Names  |      Size
 styles.css          | styles | 119 bytes
 4 unchanged chunks
 Build at: 2021-02-10T02:34:47.700Z - Hash: 6a29c3fb19bcb3f8cf4e - Time: 460ms
 ✔ Compiled successfully.
Angular initial Apps

After Angular installation and setup was successful, we should see a page similar to the following.

Conclusion

Angular installation on CentOS 8 has been completed successfully. What’s the next after this step? Just go to the Angular resources and tutorial, learn it and develop great applications. Have a nice day, stay at home and stay safe.

Share this article via :

Leave a Reply

Your email address will not be published. Required fields are marked *