Angular is the most popular front-end framework for building dynamic web applications. It uses typescript by default for creating logic and methods for a class. In this article, we’ll explore the fundamentals of Angular CLI, its basic workflow, workspace structure, and see into a comprehensive command reference for various tasks.

What is Angular CLI ?

Angular CLI is a command-line interface tool that provides the initialization, development, scaffolding, and maintenance of Angular applications directly from the command shell. Angular CLI uses Webpack behind to do all this process. It serves as a productivity booster, enabling them to focus on writing code rather than managing project configurations and build processes manually.

Installing Angular CLI

To begin harnessing the power of Angular CLI, you first need to install it on your system. Using the npm package manager, simply execute the following command:

npm install -g @angular/cli

Basic Workflow

Angular CLI provides a seamless workflow for creating and serving Angular projects. Invoke the CLI tool through the ng executable and leverage online help for command assistance. To list commands or options for a specific command, use the –help flag:

ng --help
ng new --help

Creating, building, and serving a new Angular project is as simple as executing a few commands:

ng new my-first-project
cd my-first-project
ng serve

Upon running ng serve, navigate to http://localhost:4200/ in your browser to view the newly created application. Angular CLI’s live reload feature automatically rebuilds the application and refreshes the page upon detecting changes to the source files.

Workspaces and Project Files

Angular CLI organizes projects into workspaces, each of which can contain multiple applications and libraries. The ng new command creates an Angular workspace folder and generates a new application skeleton. Additional applications or libraries generated within the workspace are stored in a projects/ subfolder.

Workspace and Project Configuration

Angular CLI uses a single workspace configuration file named angular.json, located at the top level of the workspace. This file allows you to specify per-project defaults for CLI command options and configurations for different build targets. Configuration values can be set and retrieved using the ng config command or by directly editing the angular.json file.

CLI Command-Language Syntax

Angular CLI commands follow a specific syntax convention:

ng [optional-arg] [options]

Most commands and options have aliases, with option names prefixed by double dashes (–) and option aliases prefixed by a single dash (-). Arguments and option names must be given in dash-case.

CLI Command Reference

Angular CLI offers a plethora of commands for various development tasks. Here’s a concise overview of some essential commands.