Angular CLI is the command-line interface tool that helps you kickstart new projects and maintain your application using best practices while you're creating different components of Angular, and also lets you test these practices. It also allows you to build for production and serve the application for development with its live reloading capability, along with the ability to lint, test, and run end-to-end (e2e) test cases. This project is open source and is maintained by the Angular team. Because of its wide use in the Angular community—apart from making life easier while developing an application—if you were to encounter a new Angular app that uses Angular CLI, it would follow the same shape. We will be using Angular CLI to create Angular applications and add additional functionality as and when required.

To install Angular CLI, make sure that you have installed Node 8 or above. Then, run the following command in the terminal:

> npm install -g @angular/cli

Alternatively, you can use npx instead of installing Angular CLI globally in order to avoid updating it in the future. In this book, we will not be using npx to run Angular CLI commands.

To make sure that @angular/cli has been installed, and to check the version of the CLI that you have, run the following command:

> ng version

Here, ng is the command of Angular CLI, and version is one of the commands in Angular CLI which will give you the global version as well as the local project's Angular CLI version. Global version is the version of Angular CLI installed using npm on the machine, whereas the local version is specific to the project. It will also describe all the different @angular packages that are being used in the project folder.

Now that Angular CLI is available on your local machine, you can use it for various purposes:

• Scaffolding a new Angular app
• Updating existing Angular app to newer version of Angular
• Generating new files
• Serving the application
• Building the application
• Testing the application

And many more.

Let's look at the capabilities of Angular CLI next.

Angular CLI lets you create a basic application with all the required setup to develop a professional/enterprise application. Now that we have installed Angular CLI, let's generate a new Angular project. We can do that by running the following command:

> ng new angular-project-name

This command creates a folder called angular-project-name and all the files that are required for a basic Angular application.

If you peek into the folder, you will see that it consists of the following files:

• angular.json: This is a configuration file for the Angular CLI application. It consists of all the application's descriptions and the configurations for those apps. If you need to add projects, add global assets/styles/scripts, or add some configurations, you can make a change to this file.
• tsconfig.json: This file consists of the TypeScript configuration for the project.
• tslint.json: This file consists of all the linting rules for this Angular app. If you peek into the file, you will see that it extends codelyzer, which is a custom TypeScript linter. This adds more Angular-specific rules to tslint configurations.
• src: This folder consists of application-related files. Some of these are as follows:
  • styles.css: This file is a global CSS file that will be used in the application.
  • polyfills.ts: This file has polyfills for the application to make the app run on older browsers.
  • browserlist: This file consists of browser versions that the app supports. This file is used by autoprefixer to add vendor prefixes based on the browser's support in this file.
  • main.ts: This is the main TypeScript file for the application. It bootstraps AppModule.
  • app/app.module.ts: This is the Angular's app module, also known as the root module for the application. It initially has the declaration of AppComponent. The files related to AppComponent can be found in the app folder.
• e2e folder: This folder consists of all the end-to-end testing files that use Protractor.

Now that we know how to scaffold a basic Angular app, let's learn about the other actions that Angular CLI can perform.

Angular has adopted semantic versioning, which includes major, minor, and patch releases. A major release is updated when breaking changes or substantial changes are introduced in the framework; a minor release is updated when there is a new feature being introduced in the framework; and patch releases are to fix bugs. These help users find out the potential impact of updating. Every six months, Angular releases a major update, and around 1-3 minor updates and patches every week.

With this comes the difficult task of updating the application to the latest version every six months. The Angular CLI makes this easier to update. To update Angular, run the following command in your angular application folder in the terminal.

> ng update @angular/cli @angular/core

You can also use flags such as --all and --next to update all the available updates in all the Angular schematics packages installed, and update it to the latest available version of the packages.

For more detailed help about upgrading, please visit http://update.angular.io. On it, you can select different options about your current state of the application and to what version you want to upgrade, and get a checklist of stuff you might need to update for a successful update.

Generating different files for things such as components, directives, pipes, and so on, can be tedious for some people, as it requires adding multiple files and some boilerplate code every time we create them. The Angular CLI has a command called generate that generates different kinds of files. It allows you to generate components, which are the basic building blocks of Angular apps. It generates TypeScript files, CSS files, HTML files, and a spec file. It reduces the effort of manually creating the files and then writing the initial boilerplate for the integration of those files.

To find out what files the Angular CLI can generate, please visit https://angular.io/cli/generate.

To serve an Angular app using development settings, run ng serve or npm start in your Terminal and open http://localhost:4200/ in your browser. You will see that a minimalistic Angular app has been created by the Angular CLI:

We served the application so that we can develop and see the changes of our code change in the browser. Now when we are ready for our application to be deployed to production, we need to optimize the application by building and bundling our application. Let's look at it next.

If you want to deploy your application to production, we need to first build our application and deploy the files generated after the build to the required server. To build the application for deployment, run the following command:

> ng build --prod

This command will create a dist folder, where you will be able to see all the files of the build app. You could serve this application using a local server such as http-server.

The prod flag in the preceding command creates an optimized bundle of the application. It does Ahead of Time (AOT) compilation using the ngc (the Angular compiler), which is built on top of the TypeScript compiler, to create highly optimized code. This will make the application smaller and faster.

Angular CLI makes it to add new capabilities to your application via the use of CLI extensions. There are many CLI extensions available; some of them have been built by the Angular team, but many have been created by the awesome Angular community.

Let's say you want to add the Progressive Web App capability to your app—you can just run the following command:

> ng add @angular/pwa

This command adds all the dependencies and file changes to the project, which will make it a basic Progressive Web App.

In this section, we have seen that Angular CLI can do a lot, from scaffolding the application to generating files, serving the application, building the application, and so on, with a lot of different options. This can become overwhelming for beginners to remember. In the next section, we will see another tool that can help new Angular developers to use Angular CLI without remembering all the different commands.