How to Install and Setup Angular CLI

How to Install and Setup Angular CLI

Angular is an open-source framework for your web applications. It is one of the ambitious and fast-growing platforms to develop scalable and fast applications for cross platforms, such as web, native mobile, mobile web, and more. The Angular framework contains assets, libraries, and utilities. In this tutorial, we will check how to install and setup angular CLI on CentOS or RHEL 7.

Angular CLI is the command-line interface for the Angular framework; thus, it is called Angular CLI. The Angular CLI includes packages, libraries, browser links, and more. Angular CLI uses Webpack, but there is no need for you to know how Webpack works and the configuration of the same. The Angular CLI helps you to automate the development workflow. Angular CLI offers different features, and some of them are:

  1. It helps you to create a new application in the Angular framework.
  2. It helps to preview your application with the help of the development server running on it.
  3. It helps you to add features to your existing application running with an Angular framework.
  4. It helps you to run different unit tests for your application.
  5. It helps you to run different end-to-end (E2E) tests for your application.
  6. It helps you to build applications and deploy them to production.

In this knowledgebase, you learn how to install and setup Angular CLI on CentOS or RHEL servers. For the same, follow the below steps:

1) Install Node.js

Before the installation of Angular CLI, your system should have Node.js 6.9.0 and npm 3.0.0 or higher installed. Download and install Node.js by using the following commands.

$ sudo curl -sL https://rpm.nodesource.com/setup_12.x | sudo -E bash -

$ sudo yum install nodejs

After the installation, check if the installation was successful by using the following command.

$ sudo node --version
or
$ sudo node -v
$ sudo npm --version
or
$ sudo npm -v

The above commands display the version of Node.js and npm. If TypeScript is not available on the server, run the following npm command to install TypeScript.

$ sudo npm install -g [email protected]

2) Install Angular CLI

After the successful installation of Node.js and npm, run the following command to install the Angular CLI tool on your server.

$ sudo npm install -g @angular/cli

The -g command installs the Angular CLI tool globally on your system. That makes it easy for all the users and applications on the system to use the tool. The successful installation of Angular CLI, the β€˜ng’ command installs globally on your system.

After the installation, check the version of Angular CLI by using the following command.

$ sudo ng --version

The above command should have an output similar to the one shown below:

 
_                      _                 ____ _     ___

/ \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|

/ β–³ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |

/ ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |

/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|

|___/

Angular CLI: 8.0.4
Node: 12.4.0
OS: linux x64
Angular:
...
Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.800.4
@angular-devkit/core         8.0.4
@angular-devkit/schematics   8.0.4
@schematics/angular          8.0.4
@schematics/update           0.800.4

How to Create New Angular Application

Use any of the two methods to create a new Angular application using the Angular CLI tool. The methods are:

The β€˜ng init’ command helps you to create a new application in the current directory.

The β€˜ng new’ command helps you to create a new directory, and then this command executes the β€˜ng init’ inside the director created.

So both these methods help you to create a new application, but the β€˜ng new’ creates a new directory for you. If you have not created any directory yet, then run the following command to create a new Angular application or project.

$ sudo ng new <Application_name>

For example,

$ sudo ng new hello-angular

This above command does the following:

  1. Creates a new directory named β€˜hello-angular’.
  2. Creates all the source files and directory for your new Angular application named β€˜hello-angular’.
  3. Installation of npm dependencies.
  4. Configure the TypeScript.
  5. Configure the β€˜Karma’ unit test runner.
  6. Configure the β€˜Protractor’ end-to-end test framework.
  7. It Creates environment files with default settings.

This above command should have an output similar to the one shown below:

 
...
...
added 1011 packages from 1041 contributors and audited 19005 packages in 55.774s
found 0 vulnerabilities
Successfully initialized git.

After that, you have a working application, and the directory structure should look similar to the one shown below:

.
β”œβ”€β”€ README.md
β”œβ”€β”€ e2e
β”‚   β”œβ”€β”€ app.e2e-spec.ts
β”‚   β”œβ”€β”€ app.po.ts
β”‚   └── tsconfig.e2e.json
β”œβ”€β”€ karma.conf.js
β”œβ”€β”€ package.json
β”œβ”€β”€ protractor.conf.js
β”œβ”€β”€ src
β”‚   β”œβ”€β”€ app
β”‚   β”‚   β”œβ”€β”€ app.component.css
β”‚   β”‚   β”œβ”€β”€ app.component.html
β”‚   β”‚   β”œβ”€β”€ app.component.spec.ts
β”‚   β”‚   β”œβ”€β”€ app.component.ts
β”‚   β”‚   └── app.module.ts
β”‚   β”œβ”€β”€ assets
β”‚   β”œβ”€β”€ environments
β”‚   β”‚   β”œβ”€β”€ environment.prod.ts
β”‚   β”‚   └── environment.ts
β”‚   β”œβ”€β”€ favicon.ico
β”‚   β”œβ”€β”€ index.html
β”‚   β”œβ”€β”€ main.ts
β”‚   β”œβ”€β”€ polyfills.ts
β”‚   β”œβ”€β”€ styles.css
β”‚   β”œβ”€β”€ test.ts
β”‚   β”œβ”€β”€ tsconfig.app.json
β”‚   β”œβ”€β”€ tsconfig.spec.json
β”‚   └── typings.d.ts
β”œβ”€β”€ tsconfig.json
└── tslint.json

Save Angular Application

Now, the application is ready to serve. To run the application, change the directory to the newly created directory and then run the ng command to run the Angular application.

$ sudo cd hello-angular
$ sudo ng serve

After that, to access your Angular application on localhost port 4200, hit the following URL in any wen browser:

http://localhost:4200

If you want to change the host and port number for your application, run the following command.

$ sudo ng serve --host <IP_address> --port <port_number>

We hope this knowledge base was helpful to you. Please comment below for any questions or queries. If you are an InterServer customer, please reach out to our support team for further help.

  • 0

Install Wine on Linux Distribution

Install Wine on Linux Distribution In this tutorial, we can check how to Install Wine on Linux...

Install Apache Tomcat on Ubuntu 18.04

Install Apache Tomcat on Ubuntu 18.04 The Apache Tomcat is a free, open-source Java-based web...

How to Install Jenkins on CentOS and Ubuntu Server?

How to Install Jenkins on CentOS and Ubuntu Server? Jenkins is a free and open-source automation...

Setup ILIAS LMS on Ubuntu 18.04/16.04 with Nginx

ILIAS is an Open-Source Learning Management System. ILIAS LMS offers to develop and realizing...

Bash-It Framework to Control Your Scripts and Aliases

Bash-It Framework to Control Your Scripts and Aliases Bash-it is a community-driven Bash...