Angular CLI cheatsheet – an overview of the most used commands

Updated June 6, 2018

In this post I give an overview of the most uses Angular CLI command.

Using the CLI commands can greatly boost your productivity on Angular projects.

Create a new app

Create a new angular application with the default styling option CSS.

ng new app-name

Create new angular project with scss styling and a routing module.

ng new app-name --style=scss --routing=true

More info: https://github.com/angular/angular-cli/wiki/new

Build and start the app

Build the app and start it as a webserver.

You can reach the app at: http://localhost:4200/

ng serve

Build your app and open it in the webbrowser

ng serve -o

Serve your app on a different port and use ssl.

Your app will be here: https://localhost:4444/

ng serve --port=4444 --ssl

Build using Ahead of Time compilation.

This is useful to test aot, which will be used when you compile for production.

ng serve --aot

Serve your app inside a base url

This will run the app below the url /my-app.
Your app will be here: http://localhost:4200/my-app/
This is useful when you are deploying later to a similar URL and want to develop with this URL too.

ng serve --base-href="/my-app/"

More info on ng serve : https://github.com/angular/angular-cli/wiki/serve

Build the app

Default build

ng build

Compiles the application into an output directory.
The build artifacts will be stored in the dist/ directory.

Production build

ng build --prod

Productie build for a app with a base url: /my-app/

ng build --prod --base-href="/my-app/"

Environment test Build for a app with a base url: /my-app/

ng build --prod --env=test --base-href="/my-app/"

Build dev environment with all production elements enabled

ng build --dev --aot --output-hashing=all --extract-css=true --sourcemaps=false --named-chunks=false --build-optimizer=true

Provide an output path for the compiled code.

Useful when automating your workflow.

ng build --prod --output-path C:\temp\myapp

More info on build: https://github.com/angular/angular-cli/wiki/build

Update the app

ng update

Updates the current application to latest versions.

See the update without making changes.

ng update --dry-run

Run through without making any changes.
Will list all files that would have been created when running ng update.

More info: https://github.com/angular/angular-cli/wiki/update

Generate

ng generate type name

Generates the specified blueprint.
You can also use the shorter notation: ng g
I will use the short notations in the examples below.
For the full notation see the official documentation.

Generate a module

ng g m my-module

Generate a module with a routing module

This is handy when creating a lazy loading module.

ng g m my-module --routing

Generate a component

ng g c name-component

Generate a component without a spec file

ng g c name-component --spec=false

Generate a interface

ng g i my-interface

Generate an interface with a “type”

ng g i my-interface -t=green

This will create an interface with the file name: my-interface.green.ts.

Generate a class

ng g cl my-class

Generate an enumeration

ng g e my-enum

Generate a service

ng g s my-service

Generate a guard

ng g g my-guard

Generate a pipe

ng g p my-pipe

Generate a directive

ng g d my-directive

Simulating a generate command.

Add the option –dry-run (-d) to run generate without making any changes.
It will list all files that would have been created when running ng generate.

More information on generate: https://github.com/angular/angular-cli/wiki/generate

Best practises.

For each feature of your app create a module and create your other components inside this module.
This will make it easy to eager or lazy load this feature of your app.
See also Angular style guid: https://angular.io/guide/styleguide#feature-modules

Example cars feature

• Create a module cars with the routing module

ng g m cars --routing

• Next create components inside this module

ng g c cars\cars-list
ng g c cars\cars-list-item

Create interfaces, classes and services inside a shared folder of this module.

• Create a interface (model) for the cars in a shared folder inside this module

ng g i cars\shared\car

• Create a service to fetch data in the shared folder inside this module.

ng g s cars\shared\cars-service

This results in the following directory structure

Read more about the Angular CLI: https://github.com/angular/angular-cli/wiki

Learn more about Angular’s best practices on the official Angular style guide: https://angular.io/guide/styleguide