Using the Angular CLI for your productivity

We learned how to create a project with all its options, but the Angular CLI is far from being just a project creation tool. It is a very important tool for the productivity and workflow of an Angular application. All available options are described using the following command:

ng --help

We will detail some of the most interesting options here, and in the next chapters, we will continue to use them, given the practicality of this tool.

ng add

This command has the function of adding an Angular library to your project. You might be wondering, Doesn’t npm install do the same thing? and you’d be right. However, when you need to install Angular Material as a library, installing the dependency is just the first step.

Many libraries such as Angular Material itself need the configuration of the angular.json file and the creation of some other lib file, among other tasks. The ng add command allows the library creator to automate these steps and simplify their workflow.

To exemplify this in the project that we created, we will use the following command:

ng add @angular/material

Executing the preceding command, the library will make some prompts (in the same format as we saw for the ng new command) and in the end, it will configure our project with the library, as shown in Figure 1.7.

Figure 1.7 – Installation of Angular Material using angular-cli

ng update

In the development of our projects, updating the version of something often takes more time than adding a new library. The ng update command makes this task almost trivial, being one of the greatest allies when it comes to updating the Angular version of our application.

On the Angular update website (https://update.angular.io/), the Angular team details how to update a project in old versions. Larger and more complex projects may have their quirks (which are usually described on the website), but all applications start with the following command (in this case, version 15):

ng update @angular/core@15 @angular/cli@15

The Angular CLI will take care of updating the package and even making possible automation-breaking changes; often, only this is enough to completely update your application.

This command, like ng add, is also available for libraries that have been configured by their authors and can benefit from this automation.

ng serve

This command is used by every Angular developer (it’s the first thing you should do after creating a project) and its function is to upload a development web server.

One of the most interesting and productive features of this command is the hot-reload capability; that is, the server restarts every time a project file is updated, allowing you to see its modification in real time in the interface.

A productivity tip for this command is to use the open parameter as follows:

ng serve --open

With this parameter, as soon as Angular loads your application, the CLI will open the default browser of your operating system with the application you are working on.

ng build

The ng build command is intended to prepare your application bundle to be executed by the production web server of your choice.

It performs a series of optimizations to guarantee the delivery of the smallest possible bundle of your application.

This results in a performance gain since with a smaller bundle, your client downloads faster, which is important, especially in environments with slow internet.

We will discuss this command in more detail in Chapter 12, Packaging Everything – Best Practices for Deployment.

ng deploy

The ng deploy command allows you to fully deploy your application to a cloud provider such as Microsoft Azure.

This command works together with the Angular library of the provider you want to use, so for it to work, you need to install it.

We will discuss this command in more detail in Chapter 12, Packaging Everything – Best Practices for Deployment.

ng generate

The ng generate command has the function to generate almost all types of Angular components that your application can use. This function brings a productivity gain in your workflow as it generates all the necessary files.

Let’s generate our about page in our example project with the following command:

ng generate component about

We can analyze in our project folders that the Angular CLI created the TypeScript, HTML, and CSS files necessary for rendering the component.

However, it also generated the unit test file for this component and updated the module for its use. All these files already have the minimum boilerplate for the development of the component.

In addition to generating practically all standard Angular components, this command can be used by external libraries that want to provide this development experience, as in the following example of Angular Material:

ng generate @angular/material:navigation home

In almost every chapter of the book, we’ll use this command to generate the components we’re going to study and the best practices and patterns for them.