Angular CLI Cheat Sheet – A Basic Guide to Angular CLI

The information in this guide is of an educational nature, it is mainly oriented to students and web developers who start with Angular, this compilation has been selected thinking about the necessary aspects for the basic and intermediate level courses, so it does not cover in depth each one of the mentioned aspects, only covers the most common characteristics in them.

If you want to go into more details, please check the CLI Command Reference at https://angular.io/cli

Preparing the Angular Environment

Checking Currently Installed Version of Angular

ng version      
ng v

Installing Angular CLI

npm install -g @angular/cli

npm install -g @angular/cli@latest

npm install -g @angular/cli@version

Uninstalling Angular CLI

npm uninstall -g @angular/cli

Cleaning the Cache

npm cache clean --force

Using Angular Online Help

ng help

ng <command> --help

CLI Basic Commands

CLI Command Language Syntax

ng [command] [args] [options]

- Most commands, and some options, have aliases.
- Arguments are not prefixed.
- Option names are prefixed with a double dash (--) characters. 
- Option aliases are prefixed with a single dash (-) character.

Example:

    ng build my-app -c production
    ng build my-app --configuration production
    ng b my-app -c production
    ng b my-app --configuration production

Create New Project

ng new projectName
ng n projectName

Run an Angular Application

Builds and serves your application, rebuilding on file changes.

ng serve
ng s
ng serve projectName

# Opens the url in default browser.
ng serve -o
ng serve --open

# Specify a Port to listen on.
ng serve --port portNumber

Build an Angular Application

Compiles an Angular application or library into an output directory named dist/ at the given output path.

ng build
ng b  
ng build projectName

Run Linting Tools

ng lint   
ng lint projectName

Run Unit Tests

ng test
ng t   
ng test projectName

Generate Command

Generate command in Angular CLI is one of the building blocks of Angular applications. It makes use of templates called schemas, which make it easy to create different elements quickly and safely.

Syntax

ng generate <schematic>      
ng g <schematic>

# Force overwriting of existing files.
ng generate <schematic> --force

Create a New Class

ng generate class [name]
ng generate cl [name]
ng g class [name]
ng g cl [name]

# Do not create "spec.ts" test files for the new class.
ng generate class [name] --skip-tests

Create Components

ng generate component [name]
ng generate c [name]
ng g component [name]
ng g c [name]

# Do not create "spec.ts" test files for the new component.
ng generate component [name] --skip-tests

Create Directive

ng generate directive [name]
ng generate d [name]
ng g directive [name]
ng g d [name]

# Do not create "spec.ts" test files for the new directive.
ng generate directive [name] --skip-tests

Create Enum

ng generate enum [name]
ng generate e [name]
ng g enum [name]
ng g e [name]

Create Guard

ng generate guard [name]
ng generate g [name]
ng g guard [name]
ng g g [name]

# Do not create "spec.ts" test files for the new guard.
ng generate guard [name] --skip-tests

Create Interceptor

ng generate interceptor [name]
ng g interceptor [name]

# Do not create "spec.ts" test files for the new interceptor.
ng generate interceptor [name] --skip-tests

Create Interface

ng generate interface [name]
ng generate i [name]
ng g interface [name]
ng g i [name]

Create Modules

ng generate module [name]
ng generate m [name]
ng g module [name]
ng g m [name]

Create Pipes

ng generate pipe [name]
ng generate p [name]
ng g pipe [name]
ng g p [name]

# Do not create "spec.ts" test files for the new pipe.
ng generate pipe [name] --skip-tests

Create Services

ng generate service [name]
ng generate s [name]
ng g service [name]
ng g s [name]

# Do not create "spec.ts" test files for the new service.
ng generate service [name] --skip-tests

Creator

Fabian A. Becerra M. https://github.com/fabecerram

fabecerram/AngularCLI_Cheat_Sheet.md