EDUCBA

Home Software Development Software Development Tutorials Angular Tutorial Angular CLI Commands

Angular CLI Commands

Shalu Sharma
Article byShalu Sharma
Priya Pedamkar
Reviewed byRavi Rathore

Updated March 20, 2023

angular cli commands

 

 

Introduction to Angular CLI Commands

Angular is a framework that is used to create a web application. Angular uses typescript to write our business logic and methods but the browser does not understand typescript. The browser understands JavaScript. So that’s why angular CLI comes into picture that does all these things in some simple commands for us. Angular CLI basically uses a webpack to do all this process.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Angular CLI Commands

Here we are going to learn Angular CLI commands with detail 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

1. add

If we want to add an extra library then we should go with this command. ng add command is basically 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 into 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 in our project.

2. config

It saves the configuration value for our angular project. basically 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 query 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.

3. 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]:
    • –search=true|false: Its default value is false. when we make it true, it searches all the angular.io.
    • –help=true|false|json|JSON: It is used to show help messages for this command on the console.

4. 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 a project or a library as well.
  • [options]
    • –prod=true|false: Its default value is false. when set to true it will bring all the build configuration to the projection target. A production build also runs limited dead code elimination.
    • –help= true|false|json|JSON: It will show help message for this command on the console.
    • –host=host: Name of a host on which it listens.
    • –port: It will mention the port on which the application will serve.

5. 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.

1) 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]

2) 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]

3) 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]

4) 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]

5) 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]

6) 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]

7) appShell: 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]

8) 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]

9) 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]

10) service: This subcommand is used to generate new generic service into the given or default folder of the project

Command Syntax:

ng generate service <name> [options]
ng g service <name> [options]

11) pipe: This subcommand is used to create new/ generic pipe into the given or default project.

Command Syntax:

ng generate pipe <name> [options]
ng g pipe <name> [options]

12) guard: This used to create route guard definition into the given or default project.

Command Syntax:

ng generate enum <name> [options]
ng g enum <name> [options]

13) serviceWorker: This command is used to create a service worker.

Command Syntax:

ng generate serviceWorker [options]
ng g serviceWorker [options]

14) 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]

Recommended Articles

This is a guide to Angular CLI Commands. Here we discuss the command-line interface that is used to create a project, initialize, developed, and maintain the angular applications. You may also look at the following articles to learn more –

  1. AngularJS Alternatives
  2. Install Angular 2
  3. Angular 2 vs Vue JS
  4. Angular 5 vs Angular 4
quiz