My Favorite Angular CLI Commands and Options

This article is tied to Angular CLI version < 6. For Angular CLI 6+, check out the official docs.

In my last blog post, I talked about the reasons why you should use the Angular CLI for your next Angular application. I told you that with the Angular CLI, you get out of the box some great commands that will ease your day-to-day job.
In this blog post, I would like to share with you the commands and the options that I find the most useful.

The dry-run option

--dry-run

Most of the following commands accept the --dry-run option.
It tells the Angular CLI to only show what files would have been generated when running the commands. No file will be written to disk. This is my favorite option as it allows me to try the commands in order to make sure that they do what I want.

Generating a new Angular application (ng new)

ng new my-ng-app

Generate a new application in the ./my-ng-app directory.

ng new my-ng-app --skip-install

Don't run npm install or yarn for me.

ng new my-ng-app --skip-tests

Don't generate test files (*.specs.ts).
I usually want test files to be generated. But when I am building a demo application, this option comes to be very handy.

ng new my-ng-app --prefix amc

Use amc as the prefix for generated components. By default the prefix is app.
But I suggest that you use a custom prefix for all your applications. This helps avoid naming collisions when you want to share your components with the world.

ng new my-ng-app --style scss

Define scss as our style files extensions.

ng new my-ng-app --routing

Generate a routing module (app-routing.module.ts) for our root module (app.module.ts)

ng new my-ng-app --routing --style scss --prefix amc

This command combines all my favorite options for generating a new Angular application.

Generating Angular blueprints (ng generate)

the --collection Option

Most of the following commands accept the --collection option.
It tells the Angular CLI to use a specific schematics for the files that will be generated.

Generating declarables (components, directives, and pipes) blueprints

ng generate component|directive|pipe declarable

Generate a new Angular declarable called declarable. The declarable will be in its own folder and added to the declarations array of the nearest module found.

ng generate component|directive|pipe declarable --flat

Generate a new declarable without putting it in its own folder.

ng generate component|directive|pipe declarable --spec false

don't generate test files for the declarable.

ng generate component|directive|pipe declarable --module app.module

Declare the generated declarable in app.module instead of the nearest module found. You can specify whatever is the path of the module you want your declarable to be declared in.

Generating providers (services and guards) blueprints

ng generate service|guard my-provider

Generate a new service or guard.

ng generate service|guard provider --flat

Don't put the generated provider in its own folder.

ng generate service|guard provider --spec false

Don't generate a spec file for the provider.

ng generate service|guard provider --module app.module

Add the service or guard to the providers array of app.module.

Generating modules blueprints

ng generate module my-module

Generate a new module.

ng generate module my-module --flat

Don't put the new module in its own folder.

ng generate module my-module --routing

Generate a routing module (my-module-routing.module.ts) associated with the module.

ng generate module my-module --module app.module

Add the module to the imports array of app.module.

Checking the quality of our code (ng lint, ng test, ng e2e)

Linting our code

ng lint 

Lint the project against the official Angular style guide using Codelyzer.

ng lint --format stylish

Use the stylish output format to display linting errors.

ng lint --fix

Try to automatically fix linting errors.

Running the tests

ng test

Run the unit tests and watch the files.

ng test --single-run

Run the unit tests once and exit.

ng test --code-coverage

Output code coverage files in the ./coverage directory.

ng test --browsers PhantomJS

Use PhantomJS to run the tests.

ng e2e

Run e2e tests.

ng e2e --element-explorer

Allow debugging by enabling Protractor's Element Explorer.

Serving our application for local development (ng serve)

ng serve

Build the application in-memory and serves it up.

ng serve --open

Open the application in the browser.

ng serve --proxy-config proxy.conf.js

Use the proxy.conf.js file to configure proxying to a backend for instance.

ng serve --sourcemaps false

Disable the generation of sourcemaps. With this option you won't be able to debug your application correctly but it bypasses the "92% chunk asset optimization bug".

ng serve --ssl true

Serve the application using https. The default SSL key and certificate are ./ssl/server.key and ./ssl/server.crt.

Building our application for deployment (ng build)

ng build

Build the application without optimization in the ./dist directory.

ng build --environment prod

Use prod as build environment. This means that the file environment.prod.ts will be used instead of environment.ts.

ng build --target production

Define production as build target. With this we will have all kinds of optimization for our Angular application. We are ready to go to production.

ng build --prod

Define production as build target and use prod as build environment. This is equivalent to combining the last two commands (ng build --environment prod --target prod).

Conclusion

The list of Angular CLI commands and options in this article is not exhaustive. I just showed you some of my favorites. I want to mention that all the commands and options you saw earlier, have short forms. For example, we can use ng g c instead of ng generate component.
Thanks you for reading and see you soon.