Updated April 8, 2023

Introduction to Angular Installing

Angular is a general framework for building modern web applications. Some prerequisites must be installed and configured on our local machine to build applications using angular. This software makes the development environment ready on our local device, and we can start developing the Angular Application.

Listed are the software and steps to install this software; these are needed to create a development environment on our local machine.

Prerequisites for Angular Development Environment

A development machine with Node 8.9+ and NPM 5.5.1+ installed is required for Angular development; this article covers all these steps one by one, creates an angular App, and runs and updates it through Angular CLI (command line interface). We will also discuss common angular CLI commands and their usage.

1. NodeJS and NPM

Node.js is an open-source Javascript that runs on time; in node.js, Javascript runs outside the browser; this is also called server-side Javascript. We need node.js to have a local web server and load changes as they are done in the script or project file. NPM (Node package manager) is a dependency management tool for Javascript applications. NPM (node package manager) helps us install dependencies, libraries, and other project support tools in our project; Angular also supports NPM.

To use these tools, first of all, we need to install NodeJS. Installer files for a node can be downloaded from the official website of the node:

https://nodejs.org/en/download/

As per your operating system, you can download the relevant version and install it on your local machine. Once the node is installed, successful installation and performance of the node can be verified by opening a command prompt and using/typing these commands on the command-line interface:

node –v
npm –v

Installation of a node automatically installs npm (node package manager) on a machine. As shown in the screenshot above, after typing node –v and hitting enter, we can see v10.16.0; this is the node version installed on our local machine. In the same way, we can use the command npm –v to check the installed version of npm on our device.

2. TypeScript

We can develop Angular code or applications in JavaScript, but typescript is the standard development language for Angular. TypeScript is a superset of JavaScript. It brings the feature of types in JavaScript and is used for large-scale application development at the end; typescript compiles to JavaScript and can run on browsers like JavaScript.

Installing TypeScript

npm install -g typescript

The -g in this command means it’s installed on work station globally so that the TypeScript compiler can be used in any project.

Angular CLI (Angular command-line interface): Angular command-line interface is the standard utility to create, develop and update angular applications:

npm install -g @angular/CLI

This command will install Angular CLI globally so that it can be used from any folder or project from the local machine.

The command ng version provides the details of the Angular, node, and other essential packages installed in the local system.

Frequently Used Commands in Angular CLI

Here we discuss the frequently used command in angular CLI:

1. ng-new

The Angular CLI makes it easy for us to create an application; it does a lot of auto configurations for use and provides an up-and-running Angular Project. On the command line, we can type:

ng new application-name

Here is ng new my-test app. This command will create a new working Angular Application with the name my-test-app.

2. ng generate

ng-generate is the angular CLI command to develop components, routes, services, and pipes; this command also creates a test shell for these Angular building blocks. Angular CLI also provides a shorter command version; we can replace generate with only “g.” As per standard documentation of Angular CLI, it develops and modifies files based on the option provided.

ng generate [options]
ng g [options]

This command can take the following options:

Application
directive
class
interface
library
module
pipe
service
webworks
appShell
component
enum
guard
service-worker
Universal

3. ng add

ng add command downloads and adds the npm package for a published library to the project and also configures the project; ng add command is available for only Angular CLI 6+

ng add
@ngrx/store ng
add @angular/pwa

4. ng build

ng build an essential CLI command; this command Compiles an Angular application into an output folder named dist, this command must be executed from the workspace directory, and the output or build folder can be specified in the angular.json file. Both libraries (provided in Angular 6+) and applications can be made using this command.

ng build <project>
[options] ng b <project>
[options]

Here < project> can be an angular application or library. In the options, we can have build options provided by Angular; the most frequent option used here is –prod for a production build. It internally uses the webpack tool to generate a form.

5. ng serve

ng serve also a frequently used Angular CLI command. Ng help to build and serve a project (creates a local webserver at a port and provides us the URL link) and rebuilds on changes in any file.

ng serve <project>
[options] ng s <project>
[options]

We can specify the port number in this command in additional options, like:

ng serve –port
4201 ng s –port
4201

Once this command starts serving our project successfully, we can see a message like, Angular live development server is listening on https://localhost:4200 (or the port you have specified). Open your browser on https://localhost:4200 (4200 is the default configured port for Angular Applications)

6. ng e2e

Running test cases in Angular Application can also be done using Angular CLI; below is the command for running end-to-end test cases in Angular. Ng e2e command first builds and then runs tests using Protractor. This command should be executed from within a workspace directory.

ng e2e <project>
[options] ng e <project>
[options]

7. ng test

We can also run unit test cases from Angular CLI; ng-test runs the unit tests in the directory

ng test <project> [options]
ng t <project> [options]

8. ng help

ng help gives the list of all the available commands in Angular CLI, so it can be used whenever we need help or information about any order in Angular CLI.

Quiz Result
Total Questions	Correct Answers	Wrong Answers	Percentage