Installing Angular

Installing Angular
Techiio-author
Written by Sagar RabidasJanuary 11, 2022
9 min read
Angular
0 VIEWS 0 LIKES 0 DISLIKES SHARE
0 LIKES 0 DISLIKES 0 VIEWS SHARE
Techiio-author
Sagar Rabidas

Software Developer

In this blog, we will discuss Installing Angular.

Angular:-

Angular is a very popular framework for constructing contemporary net programs. To construct packages using angular some prerequisites need to be established and configured on our nearby machine. This software makes the development environment prepared on our neighborhood device and we can start the development of the angular software.

Listed are software programs and steps to install this software, these are had to create a development environment on our neighborhood machine.

Pre-requisites 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 and creates an angular App and runs and updates it through Angular CLI and we will also discuss common angular CLI commands and their usage.

NodeJS and NPM:-

Node.Js is an open-supply, javascript runs to time, in node.Js javascript runs out of doors the browser, this is also known as server-facet javascript. We need node.Js to have a local internet server and cargo adjustments as they're executed in the script or undertaking document. Npm is a dependency management tool for javascript applications, npm facilitates us to put in dependencies and libraries, and different project aid equipment in our task, angular also helps npm.

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 version of a 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 machine.

TypeScript:-

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

Installing TypeScript:-

npm install -g typescript

Frequently Used Commands in Angular CLI

Here we discuss the frequently used command in angular CLI:

  • ng-new

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

ng new application-name

here ng new my-test-app. This command will create a new working Angular Application for us with the name my-test-app.

  • ng generate

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

ng generate [options] ng g [options]

This command can take the following options:

  1. Application
  2. directive
  3. class
  4. interface
  5. library
  6. module
  7. pipe
  8. service
  9. web workers
  10. app shell
  11. component
  12. enum
  13. guard
  14. service-worker
  15. universal
  • 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
  • ng build

ng build is a very important CLI command, this command Compiles an Angular application into an output folder named dist, this command must be executed from workspace directory and output or build folder can be specified in angular.json file. Both libraries (provided in Angular 6+) and applications can be built 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 webpack tool to generate a build.

  • ng serve

ng serve is also a frequently used Angular CLI command. ng serve to build and serves a project (creates a local webserver at a port and provides us the link of the URL) 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
  • ng e2e

Running test cases in angular software can also be completed with the use of angular CLI, under is the command for jogging gives up-to-end test cases in angular. Ng e2e command first builds and then runs exams the use of a protractor. This command should be achieved from within a workspace listing.

ng e2e <project>
[options] ng e <project>
[options]
  • 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]
  • ng help

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

Angular
AngularJs
Installing Angular
0 VIEWS 0 LIKES 0 DISLIKES SHARE
0 LIKES 0 DISLIKES 0 VIEWS SHARE
Was this blog helpful?
techiio-price-plantechiio-price-plantechiio-price-plantechiio-price-plantechiio-price-plan
You must be Logged in to comment
Code Block
Techiio-logo

Techiio is on the journey to build an ocean of technical knowledge, scouring the emerging stars in process and proffering them to the corporate world.

Follow us on:

Subscribe to get latest updates

You can unsubscribe anytime from getting updates from us
Developed and maintained by Wikiance
Developed and maintained by Wikiance