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.
If you enjoyed this article, follow @ahasall on Twitter for more content like this.
