Introduction to Angular
Angular is a very popular framework for building modern web applications. To build applications using angular there are some prerequisites that need to be installed and configured on our local machine. These softwares make the development environment ready on our local machine and we can start the development of Angular Application.
listed are softwares and steps to install these softwares, these are needed to create a development environment on our local 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 create an angular App and run and update it through Angular CLI (command line interface) and we will also discuss common angular CLI commands and their usage.
1. NodeJS and 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 node:
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 node can be verified by opening command prompt and using/typing these command on the command-line interface:
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 node version installed on our local machine. In the same way, we can use command npm –v to check the installed version of npm on our machine.
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 of project.
Angular CLI (Angular command-line interface): Angular command-line interface is the standard utility to create, develop and update angular application:
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 us the details of the Angular, node and other important packages installed in the local system.
Frequently Used Commands in Angular CLI
Here we discuss the frequently used command in angular CLI:
The Angular CLI makes it easy for us to create an application, it does a lot of auto configurations to 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.
2. 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 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:
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+
4. 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>
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.
5. 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>
We can specify the port number in this command in additional options, like:
ng serve –port
4201 ng s –port
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>
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 any help or information about any command in Angular CLI.
This is a guide to Installing Angular. Here we discuss the Introduction and frequently used commands in angular CLI along with pre-requisites for the angular development environment. You may also have a look at the following articles to learn more –