Angular-CLI cheatsheet

Table of contents

  1. CLI Overview and Command Reference
  2. Cheatsheet: Angular CLI Reference
  3. Installing Angular CLI
  4. Checking the Version
  5. Updating the Version
  6. Updating projects
  7. Help
  8. New Project
  9. Generate a component
  10. Generate a service
  11. Generate a pipe
  12. Generate a directive
  13. Generate an enum
  14. Generate a module
  15. Generate a class
  16. Generate an interface
  17. Generate a route guard
  18. Serving

CLI Overview and Command Reference

Cheatsheet: Angular CLI Reference

Installing Angular CLI

$ npm install -g @angular/cli

Checking the Version

$ ng --version

Updating the Version

$ npm uninstall -g @angular/cli cache clean
$ npm install -g @angular/cli@latest

Updating projects

For simple updates, the CLI command ng update is all you need. Without additional arguments, ng update lists the updates that are available to you and provides recommended steps to update your application to the most current version.

$ ng update

Help

$ ng help # Get general help:
$ ng help generate # Or get help for a specific command:

New Project

$ ng new my-app
$ ng new my-app --prefix yo --style scss --skip-tests --verbose # An example with a few flags

And here are a few flags you can use:

  • –dry-run: See which files would be created, but don’t actually do anything.
  • –verbose: Be more chatty.
  • –skip-install: Don’t npm install, useful when offline or with slow internet.
  • –skip-tests: Don’t create spec files.
  • –skip-git: Don’t initialize a git repo.
  • –source-dir: Name of the source directory
  • –routing: Add routing to the app.
  • –prefix: Specify the prefix to use for components selectors.
  • –style: Defaults to css, but can be set to scss.
  • –inline-style: Use inline styles for components instead of separate files.
  • –inline-template: Use inline templates for components instead of separate files.

Generate a component

$ ng g c unicorn-component

Generate a service

$ ng g s everything-service

Generate a pipe

$ ng g pipe my-pipe

Generate a directive

$ ng g directive my-directive

Generate an enum

$ ng g enum some-enum

Generate a module

$ ng g module fancy-module

Generate a class

$ ng g cl my-class

Generate an interface

$ ng g interface my-interface

Generate a route guard

$ ng g guard my-guard

The –dry-run and –verbose flags can be used with any generate command.

Serving

$ ng s # Serve your project
$ ng s -o # Serve and open in your default browser automatically
$ ng s --port 5555 # Serve to a different port