Angular CLI Commands

Angular CLI Commands
Techiio-author
Written by Sagar RabidasDecember 27, 2021
11 min read
Angular
0 VIEWS 0 LIKES 0 DISLIKES SHARE
0 LIKES 0 DISLIKES 0 VIEWS SHARE
Techiio-author
Sagar Rabidas

Software Developer

Today in this blog we will discuss Angular CLI Commands.

Angular:-

Angular is an open-source framework that is TypeScript based and used to build applications for desktops and websites. The Angular project was directed by the Angular Team at Google and built with the aid of a large community of businesses and individuals. Angular is also known as “Angular 2+” or “Angular v2 and above” because it is a complete rebuild of AngularJS (Angular 1). It was released in 2016 under an MIT license and is mainly used for front-end web development. Angular is component-based, and this internet framework can help you to build scalable website applications efficiently. It also offers several built-in libraries that cover various important features such as document control, client-server communication, routing, and more.

blogpost

Introduction to Angular CLI Commands:-

Angular is a framework that is used to create an internet application. Angular makes use of typescript to write our commercial enterprise common sense and techniques however the browser does now not apprehend typescript. The browser is aware of javascript. So that’s why angular CLI comes into the picture that does all these items in some simple commands for us. Angular CLI makes use of a web percent to do all this manner.

blogpost

Angular CLI Commands:-

Here we are going to learn Angular CLI commands with a detailed explanation.

Step 1: Create an angular application using angular CLI.

Install Angular CLI, for this first we need to install the CLI from the below command.

npm install - g @angular/cli

Step 2: Create a new angular project by using the below command.

ng new myNewApp


  • add:-

If we want to add an extra library then we should go with this command. ng add command is used to add an extra or external library to our project. It adds the npm packages to our workspace and we can use this library in our project for development. Suppose we add any external library like angular material we want to use then we need to add this into our workspace.

Command Syntax:
ng add <collection> [options]

Explanation:

<collection>: This specifies the package we want to add to our project.


  • config:-

It saves the configuration value for our angular project. it set and retrieves the angular configuration value into the angular.json file for our project.

Command Syntax:
ng config <jsonPath> <value> [options]

Explanation:

  • <jsonPath>: It set or queries the key value from the JSON path format. If we do not set the new value for this key it will return the current value for this key.
  • <value>: It provides the value for the given configuration key. If we provide them new value it will show new value for the given key.


  • doc:-

This ng doc command is used to open the angular documentation into the browser where we can search for a given keyword. It opens an angular.io file for us to search for.

Command Syntax:

ng doc <keyword> [options] ng d <keyword> [options]
Explanation:
  • <keyword>: We need to specify the keyword which we want to search as it is specified in the anular.io search bar.
  • [options]:
  1. –search=true|false: Its default value is false. when we make it true, it searches all the angular.io.
  2. –help=true|false|json|JSON: It is used to show help messages for this command on the console.


  • e2e:-

This command is used to run and build our application. It runs all the test cases using a protector.

Command Syntax :

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

Explanation:

  • <project>: Here we need to specify the project name that we want to build or serve. It may be a project or a library as well.
  • [options]
  1. –prod=true|false: Its default value is false. when set to true it will bring all the build configurations to the projection target. A production build also runs limited dead code elimination.
  2. –help= true|false|json|JSON: It will show a help message for this command on the console.
  3. –host=host: Name of a host on which it listens.
  4. –port: It will mention the port on which the application will serve.


  • generate:-
ng generate command is used to modify or generate the file based on parameters.

Command Syntax:

ng generate <schematic> [options] ng g <schematic> [options]

Explanation:

  • It takes the collection or schematic which we want to generate. It contains various sun commands mentioned below.
  • application: This command is used for new basic app definitions in the “project” subfolder.

Command Syntax:

ng generate application <name> [options] ng g application <name> [options]
  • class: This command is used to generate a new class into the given or default folder of the project.

Command Syntax:

ng generate class <name> [options] ng g class <name> [options]
  • universal: This subcommand is used to pass the “run” command to set up the server-side rendering of the application.

Command Syntax:

ng generate universal [options] ng g universal [options]
  • directive: This subcommand is used to create a directive into the given or default folder of the project.

Command Syntax:

ng generate directive <name> [options] ng g directive <name> [options]
  • interface: This subcommand is used to create a new interface into the given or default folder of the project.

Command Syntax:

ng generate interface <name> <type> [options] ng g interface <name> <type> [options]
  • component: This sun command is used to create a new generic component in the given or default folder of the project.

Command Syntax :

ng generate component <name> [options] ng g component <name> [options]
  • app shell: This subcommand is used to generate an app shell that is required to run the server-side version of the application.

Command Syntax :

ng generate appShell [options] ng g appShell [options]
  • library: This subcommand is used to create a new generic library on the given or default folder of the project.

Command Syntax :

ng generate library <name> [options] ng g library <name> [options]
  • module: This subcommand is used to create new generic NgModule into the given or default project.

Command Syntax:

ng generate module <name> [options] ng g module <name> [options]
  • service: This subcommand is used to generate a new generic service into the given or default folder of the project

Command Syntax:

ng generate service <name> [options] ng g service <name> [options]
  • pipe: This subcommand is used to create a new/ generic pipe into the given or default project.

Command Syntax:

ng generate pipe <name> [options] ng g pipe <name> [options]
  • guard: This is used to create route guard definition into the given or default project.

Command Syntax:

ng generate enum <name> [options] ng g enum <name> [options]
  • service-worker: This command is used to create a service worker.

Command Syntax:

ng generate serviceWorker [options] ng g serviceWorker [options]
  • enum: This subcommand is used to create a new generic enum definition to the given or default project.

Command Syntax:

ng generate enum <name> [options] ng g enum <name> [options]
angular
angularjs
angular cli
angular cli commands
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