Updated June 6, 2018

Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers who build compelling user interfaces with Angular. This library is a work in progress and any issues/pull-requests are welcomed! Based off of the angular-hotkeys library. To enable the cheat sheet, simply add.

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.

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

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/

Build your app and open it in the webbrowser

Serve your app on a different port and use ssl.

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

Build using Ahead of Time compilation.

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

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.

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

Build the app

Default build

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

Production build

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

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

Build dev environment with all production elements enabled

Provide an output path for the compiled code.

Useful when automating your workflow.

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

Update the app

Updates the current application to latest versions.

See the update without making changes.

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

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

Generate a module with a routing module

This is handy when creating a lazy loading module.

Generate a component

Generate a component without a spec file

Generate a interface

Generate an interface with a “type”

Brett manning mastering mix pdf file. This will create an interface with the file name: my-interface.green.ts.

Generate a class

Generate an enumeration

Generate a service

Generate a guard

Generate a pipe

Generate a 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

• Next create components inside this module

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

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

This results in the following directory structure

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

Angular 9 Changes

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