Creating an Angular application

Every chapter of the book requires setting up a new Angular application. The standard tool for making an Angular application is the Angular CLI. It is an npm package that provides a command-line tool to scaffold and run an Angular application. In the following section, we will learn how to install it.

Installing the Angular CLI

Open a terminal window and run the following command to install the Angular CLI globally on your machine:

npm install -g @angular/cli

The preceding command will install the latest version of the Angular CLI, which is published on the npm registry by the Angular team.

To verify that you have installed version 22, run the following command in the same terminal window:

ng version

The output of the preceding command should indicate that the installed Angular CLI is version 22.

If you have a different version installed, run the following command to install the correct one:

npm install -g @angular/cli@22

Your local environment is now configured with the Angular CLI, and you are ready to start building Angular applications. In the following section, you will use the Angular CLI to create a new application.

Scaffolding a new application

We use the Angular CLI by running the ng executable from a terminal window. It accepts an option as a parameter that defines the type of task we want to complete using the Angular CLI.

The new option indicates that we want to scaffold a new Angular application:

1. Run the following command in a terminal window:

   ng new my-app

   The preceding command will initiate a process that guides you in creating a new Angular application named my‑app. The process involves asking questions to provide more context in the CLI about the application you want to build.

2. The first question is about what stylesheet format we would like to use in our application. The Angular CLI supports the following formats:
   • CSS
   • Tailwind CSS
   • Sass
   • Less

   Use the keyboard arrows to highlight the Sass (SCSS) option and press Enter.

3. The next question is whether we want to configure the application for server-side rendering (SSR). Press Enter to skip this step. We will build an SSR-enabled application in Chapter 7, Expense Builder: Building an SSR-Optimized Expense Tracker.
4. The last question prompts us to add an AI coding assistant to the Angular project. The Angular CLI supports a rich collection of AI tools. Select the GitHub Copilot option and press Enter.

The Angular CLI downloads and installs all necessary packages and creates default files for your Angular application. After finishing, the my‑app folder will contain a basic Angular application.

Execute the following command from a terminal window inside the my‑app folder to run your application:

ng serve 

The Angular CLI compiles the Angular application and starts a web server to host it. After successful compilation, you can preview the application by opening your browser and navigating to http://localhost:4200.

We now have a basic Angular application that will serve as the foundation for the projects we will build in the following chapters. In the next section, we will learn about the tools required to develop our Angular projects.