How To Work With Angular CLI

Hello Guys ! In this HOW TO GUIDE I will be showing you how to deal with Angular’s Command Line Interface (CLI).For those who are unfamiliar with the term ,basically Angular CLI is a command line interface tool for Angular applications that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment very easily via the command line.

Common Angular CLI Commands

• ng new

  • Alias : l
  • Used to creates a directory and a new Angular app
  • Common Arguments : –dry-run (default:false,alias -d) – Run without making any changes.It will list all files that will be created on running the ‘ng new’ command,–verbose(alias -v) – This will add more details to the output screen logs,–collection (alias -c) – Schematics collection to use.
  • Eg. ng new myApp , ng new -d myApp

• ng serve

  • Alias : server , s
  • It is the most commonly used command that you will encounter.This command builds and serves your application.Also it rebuilds the application on any changes done.
  • Common Arguments : –target (alias -t <value>=development/production) –  Define the build target,–verbose(alias -v) – This will add more details to the output screen logs,–app (alias -a <value>) – Specify app name or index to use, –port(default:4200,alias -p <value>) – Specifies the port to listen on ,–host(default:localhost, alias -H <value>) – Specify the host to listen on,–open(Default:false,alias -o,-open)-Opens the url in default browser,–live-reload(Default:true,alias:-lr)-Whether to reload the page on change, –public-host(alias:–live-reload-client <value>,–publicHost <value>) – Specify the URL the browser client will use.
  • Eg. ng serve , ng serve -p 8100 , ng serve -lr false

• ng generate

  • Alias : g
  • Generates and / or modifies files based on a Schematic. The schematics are class,component,directive,enum,guard,interface,module,pipe,service,application,library,universal.
  • Common Arguments : –dry-run (default:false,alias -d) – Run without making any changes,–force(default:false,alias:-f)-Forces overwriting of files,–app(alias -a <value>) Specify app name to use,–collection (alias -c) – Schematics collection to use.
  • Eg. ng generate component mycomponent ,ng g c mycomponent

• ng test

  • Alias : t
  • Used to run Unit Tests in existing project.
  • Common Arguments : –app (alias -a <value>) – Specify app name or index to use, –port(default:4200,alias -p <value>) – Specifies the port to listen on ,–browsers(alias –browsers)-Overrides which browsers tests are run against, –single-run(deafult:true,alias:-sr) – Run test single time,–progress(Default:true,alias:–progress) – Log progress to the console while in  progress.
  • Eg. ng test

• ng version

  • Alias : v,-v,–version
  • Used to output Angular CLI version
  • Eg. ng -v

• ng build

  • Alias : b
  • Used to compiles the application into an output directory.
  • Common Arguments : –prod – Flag to set configuration to “prod”,–verbose(alias -v) – This will add more details to the output screen logs,–watch – Run build when file change.
  • Eg. ng build

• ng set/get

  • Used to set/get  values in the configuration.
  • Common Arguments : –global (default:false,alias -g) – Set the value in the global configuration rather in project.
  • Eg. ng config [key] [value]

• ng update

  • Used to update the application.
  • Common Arguments : –dry-run (default:false,alias -d) – Run without making any changes,–next(default:false,alias -next) – Install the next version instead of the latest.
  • Eg. ng update

That’s all folks ! These are the most common commands that are used during the development and testing phase of Angular applications.However if you want full list of options and all the options associated with them you can easily go through them from the ng help command.

Hope you enjoyed this guide ! See you next time 🙂