Setting up the Angular CLI workspace

Setting up a project with Angular can be tricky. You need to know what libraries to import and ensure that files are processed in the correct order, which leads us to the topic of scaffolding. Scaffolding is a tool to automate tasks, such as generating a project from scratch, and it becomes necessary as complexity grows and where every hour counts toward producing business value, rather than being spent fighting configuration problems.

The primary motivation behind creating the Angular CLI was to help developers focus on application building, eliminating the configuration boilerplate. Essentially, with a simple command, you should be able to initialize an application, add new artifacts, run tests, update applications, and create a production-grade bundle. The Angular CLI supports all of this using special commands called schematics.

Prerequisites

Before we begin, we must ensure that our development environment includes software tools essential to the Angular development workflow.

Node.js

Node.js is a JavaScript runtime built on top of Chrome’s v8 JavaScript engine. Angular requires an active or maintenance Long-Time Support (LTS) version. If you have already installed it, you can run node -v on the command line to check which version you are running.

npm

npm is a software package manager that is included by default in Node.js. You can check this out by running npm -v in the command line. An Angular application consists of various libraries, called packages, that exist in a central place called the npm registry. The npm client downloads and installs the libraries needed to run your application from the npm registry to your local computer.

Git

Git is a client that allows us to connect to distributed version-control systems, such as GitHub, Bitbucket, and GitLab. It is optional from the perspective of the Angular CLI. You should install it if you want to upload your Angular project to a Git repository, which you might want to do.

Installing the Angular CLI

The Angular CLI is part of the Angular ecosystem and can be downloaded from the npm package registry. Since it is used to create Angular projects, we must install it globally in our system. Open a terminal window and run the following command:

npm install -g @angular/cli

The command that we used to install the Angular CLI uses the npm client, followed by a set of runtime arguments:

• install or i: Denotes the installation of a package
• -g or --global: Indicates that the package will be installed on the system globally
• @angular/cli: The name of the package to install

The Angular CLI follows the same version as the Angular framework, which in this book is 19. The preceding command will install the latest stable version of the Angular CLI. You can check which version you have installed by running ng version or ng v in the command line. If you have a different version than 19 after installing it, you can run the following command:

npm install -g @angular/cli@19

The preceding command will fetch and install the latest version of Angular CLI 19.

CLI commands

The Angular CLI is a command-line interface tool that automates specific tasks during development, such as serving, building, bundling, updating, and testing an Angular project. As the name implies, it uses the command line to invoke the ng executable file and run commands using the following syntax:

ng [command] [options]

Here, [command] is the name of the command to be executed, and [options] denotes additional parameters that can be passed to each command. To view all available commands, you can run the following:

ng help

Some commands can be invoked using an alias instead of the name. In this book, we cover the most common ones (the alias of each command is shown inside parentheses):

• new (n): Creates a new Angular CLI workspace from scratch
• build (b): Compiles an Angular application and outputs generated files in a predefined folder
• generate (g): Creates new files that comprise an Angular application
• serve (dev): Builds an Angular application and serves it using a pre-configured web server
• test (t): Runs the unit tests of an Angular application
• add: Installs an Angular library in an Angular application
• update: Updates an Angular application to the latest Angular version

You can find more Angular CLI commands at https://angular.dev/cli.

Updating an Angular application is one of the most critical tasks from the preceding list. It helps us stay up to date by upgrading our Angular applications to the latest version.

Additionally, you can use the Angular upgrade guide, which contains tips and step-by-step instructions on updating your applications, at https://angular.dev/update-guide.

Creating a new project

Now that we have prepared our development environment, we can start creating our first Angular application. We will use the ng new command of the Angular CLI and pass the name of the application that we want to create as an option:

1. Open a terminal window, navigate to a folder of your choice, and run the command ng new my-app. Creating a new Angular application is a straightforward process. The Angular CLI will ask for details about the application we want to create so that it can scaffold the Angular project as best as possible.
2. Initially, it will ask if we want to enable Angular analytics:

   Would you like to share pseudonymous usage data about this project with the Angular Team at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more details and how to change this setting, see https://angular.dev/cli/analytics. (y/N)
   

The Angular CLI will ask this question once when we create the first Angular project and apply it globally in our system. However, we can change the setting later in a specific Angular workspace.

3. The next question is related to the styling of our application:

   Which stylesheet format would you like to use?
   

It is common to use CSS to style Angular applications. However, we can use preprocessors like SCSS or Less to add value to our development workflow. In this book, we work with CSS directly, so accept the default choice, CSS, and press Enter.

4. Finally, the Angular CLI will prompt us if we want to enable SSR and Static Site Generation (SSG) in our application:

   Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? (y/N)
   

SSR and SSG are concerned with improving the startup and load performance of an Angular application. We will learn more about them in Chapter 15, Optimizing Application Performance. For now, accept the default choice, No, by pressing Enter.

The process may take some time, depending on your internet connection. During this time, the Angular CLI downloads and installs all necessary packages and creates default files for your Angular application. When finished, it will have created a folder called my-app. The folder represents an Angular CLI workspace that contains a single Angular application called my-app at the root level.

The workspace contains various folders and configuration files that the Angular CLI needs to build and test the Angular application:

• .vscode: Includes VSCode configuration files
• node_modules: Includes installed npm packages that are needed to develop and run the Angular application
• public: Contains static assets such as fonts, images, and icons
• src: Contains the source files of the application
• .editorconfig: Defines coding styles for the default editor
• .gitignore: Specifies the files and folders that Git should not track
• angular.json: The main configuration file of the Angular CLI workspace
• package.json and package-lock.json: Provide definitions of npm packages, along with their exact versions, which are needed to develop, test, and run the Angular application
• README.md: A README file that is automatically generated from the Angular CLI
• tsconfig.app.json: A TypeScript configuration that is specific to the Angular application
• tsconfig.json: A TypeScript configuration that is specific to the Angular CLI workspace
• tsconfig.spec.json: A TypeScript configuration that is specific to unit tests of the Angular application

As developers, we should only care about writing the source code that implements features for our application. Nevertheless, having basic knowledge of how the application is orchestrated and configured helps us better understand the mechanics and ways to intervene if necessary.

Navigate to the newly created folder and start your application with the following command:

ng serve

The Angular CLI compiles the Angular project and starts a web server that watches for changes in project files. This way, whenever you change your application code, the web server rebuilds the project to reflect the new changes.

After compilation has been completed successfully, you can preview the application by opening your browser and navigating to http://localhost:4200:

Figure 1.1: Angular application landing page

Congratulations! You have created your first Angular CLI workspace. The Angular CLI created a sample web page that we can use as a reference to build our project. In the next section, we will explore the main parts of our application and learn how to modify this page.