Tuesday, January 29, 2019

ANGULAR CLI(command-line interface)


Angular CLI makes it easy to start with any Angular project. Angular CLI comes with commands that help us create and start on our project very fast. Let us now go through the commands available to create a project, a component and services, change the port, etc.
To work with Angular CLI, we need to have it installed on our system. Let us use the following command for the same −
npm install -g @angular/cli
To create a new project, we can run the following command in the command line and the project will be created.
ng new PROJECT-NAME
cd PROJECT-NAME
ng serve //
ng serve // will compile and you can see the output of your project in the browser −
http://localhost:4200/
4200 is the default port used when a new project is created. You can change the port with the following command −
ng serve --host 0.0.0.0 --port 4201
The following table lists down a few important commands required while working with Angular 4 projects.
Component ng g component new-component
Directive ng g directive new-directive
Pipe ng g pipe new-pipe
Service ng g service new-service
Module ng g module my-module
Whenever a new module, a component, or a service is created, the reference of the same is updated in the parent module app.module.ts.


ANGULAR ENVIRONMENT SETUP


In this chapter, we will discuss the Environment Setup required for Angular 4. To install Angular 4, we require the following −

  • Nodejs
  • Npm
  • Angular CLI
  • IDE for writing your code

Nodejs has to be greater than 4 and npm has to be greater than 3.

Nodejs


To check if nodejs is installed on your system, type node –v in the terminal. This will help you see the version of nodejs currently installed on your system.

C:\>node –v
v6.11.0

If it does not print anything, install nodejs on your system. To install nodejs, go the homepage https://nodejs.org/en/download/ of nodejs and install the package based on your OS.

The homepage of nodejs will look like the following −
NodeJS Homepage
Based on your OS, install the required package. Once nodejs is installed, npm will also get installed along with it. To check if npm is installed or not, type npm –v in the terminal. It should display the version of the npm.

C:\>npm –v
5.3.0

Angular 4 installations are very simple with the help of angular CLI. Visit the homepage https://cli.angular.io/ of angular to get the reference of the command.
Angular CLI
Type npm install –g @angular/cli, to install angular cli on your system.
Install Angular CLI
You will get the above installation in your terminal, once Angular CLI is installed. You can use any IDE of your choice, i.e., WebStorm, Atom, Visual Studio Code, etc.

ANGULAR CLI(command-line interface)

Angular CLI makes it easy to start with any Angular project. Angular CLI comes with commands that help us create and start on our projec...