Learn About Some Useful Angular CLI Commands

Introduction

In this article, I am going to discuss some useful Angular CLI commands.

To open Visual Studio Code from Command Prompt, use the following code and hit Enter.

After opening Visual Studio Code, to open Integrated Terminal, press Ctrl + `

Note

You can use general Command prompt of Windows for this.

After opening the Integrated Terminal on Visual Studio Code, you can use the following useful commands for Angular CLI.

To create a new Angular Project

Command
c:\>ng new MyApplication

• ng - is the Angular CLI
• new - is for creating a new application
• MyApplication - is the name of your angular application

After executing the above command, all the necessary files, folders, and configuration are created.

After the project is successfully created,  go to the Angular Project folder by changing the directory by using the following command:

cd MyApplication

You can use the different options while creating Angular Project and to list out the different options of the new command, you can use

ng new –help

 

where you can find all available options for new commands.

Some helpful options,

1. --dry-run Or –d : Run through without making any changes. Just reports the files that will be created, default it is false
   
   E.g. :
   
   
   
   
2. --skip-install Or –si : Skip installing packages
3. --skip-tests Or –st  : Skip creating tests
4. --inline-style Or –is :  Use inline styles when generating the new application
5. --inline-template Or -it : Use inline templates when generating the new project

To run the project using Angular CLI

Command
ng serve --open Or ng serve –o

This command builds the application and opens it in our default browser. The flag --open, launches our default browser and runs the application. By default the application runs on port 4200.

To stop the server, press CTRL + C while you are on the command prompt and then "Y" and ENTER key. This will stop the server.

To create a new Component, Service, Class, pipe, etc.

To create a new Component, Service, Class, pipe, etc. we use ng generate (ng g) command where the letter g stands for generate,

and you can write commands like below: 

Examples

1. Component :  ng generate component MyComponentName Or ng g c ComponentName
2. Service :  ng generate service myservicename  Or ng g s myservicename  
3. Module :  ng generate module mymoduleName Or ng g m mymoduleName
4. Directive : ng generate directive mydirectiveName Or ng g d mydirectiveName
5. Pipe :  ng generate pipe pipeName Or ng g p pipeName
6. Routing Guard : ng generate guard guardName Or ng g g guardName
7. Class :  ng generate class myclassname Or ng g cl myclassname
8. Interface :  ng generate interface myinterfacename  Or  ng g i myinterfacename
9. Enum :  ng generate enum myenumName Or ng g e myenumName

To register our service, component, etc. with a module

To register our service, component, etc. with a module we can use --module option. We can also use its alias –m.

Example

ng generate service myservicename -module=app.module

To create a new Component without creating a dedicated folder

To create a new Component without creating a dedicated folder we can use the flat option which specifies if a dedicated folder should be created.

Example

ng g c MyComponentName –flat

Here –flat will not create a new directory.

Summary

In this article, I discussed how we can use Angular CLI command while developing the Angular app.

Hope this will be helpful to you. Thank you.