You can download the example project and code for this book by following the instructions in the Download the example code files section in the Preface of this book.

This chapter's code files are included in the downloadable code bundle.

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.

One of the most popular tools for developing with Angular is Visual Studio Code (VS Code). It contains a rich collection of extensions that we can install to enhance the developer experience with the Angular framework. We can find and install Angular extensions from the Extensions menu in the VS Code toolbar. In this section, we will use Profiles to install a curated collection of Angular extensions.

We add profiles from the Manage menu:

1. Click on the button with the gear icon to access the Manage menu.
2. Select the Profiles option from the pop-up menu.
3. Click the down arrow in the New Profile button and select the From Template | Angular option. VS Code adds a new profile that contains settings and extensions useful for Angular development.
4. Click the Create button to start the installation of the Angular profile. Depending on your VS Code configuration, you may be asked to allow the installation of third-party extensions.

The process will install extensions and configure VS Code according to the Angular profile. The profile can be enabled in the following ways:

• Automatically: Check the Use this profile as the default for new windows to enable it for all VS Code windows by default
• Manually: Use the Manage menu to switch to the Angular profile

It is recommended to use the manual approach if you are using VS Code to develop with other technology stacks in addition to Angular.

VS Code activates installed extensions when you enable the Angular profile. The projects that we will build in the following chapters do not use all of them. The most common ones are as follows:

• Angular Language Service: This is developed and maintained by the Angular team, offering features such as code completion, navigation, and effective error diagnosis within Angular templates and classes.
• Angular Schematics: This provides a way to create different parts of an Angular application through an intuitive user interface.
• EditorConfig for VS Code: This can override VS Code settings such as indentation and spacing using a local configuration file.
• Material Icon Theme: This extends the default VS Code icons by adding new ones that are based on Material Design Icons and the Angular framework.

VSCode uses the remaining extensions of the Angular profile according to the specific needs of an Angular application. For example, the Jest extension is helpful if you use the Jest test runner for unit testing. Similarly, the ESLint extension provides linting capabilities to an application when the ESLint library is installed.

We now have a basic configuration of VS Code that will help us develop Angular projects with confidence. In the following section, we will learn how to apply best practices in Angular development using AI assistive technology.

The latest version of VS Code includes a built-in integration of GitHub Copilot. We will learn how to use Copilot as an AI pair programmer and develop Angular applications in the following ways:

• Smarter by providing instructions with Angular best practices in mind
• Faster by building different parts of the Angular application using prompts

In the following sections, we will explore both concepts as we continue to develop our Angular application.

Customizing instructions

AI agents use instructions to define a working context and operate within specific boundaries. Instructions define the role and capabilities of the agent in the current context. The Angular CLI created an instructions file for Copilot while creating the application:

1. Open VS Code and select File | Open Folder… from the main menu.
2. Navigate to the my‑app folder and select it. VS Code will load the associated Angular CLI project.
3. Expand the .github folder and select the copilot‑instructions.md file. The Markdown file contains instructions that help Copilot understand Angular.
4. The top of the file defines the role of the AI agent:

   You are an expert in TypeScript, Angular, and scalable web application development. You write functional, maintainable, performant, and accessible code following Angular and TypeScript best practices.

5. Each heading in the file represents a different capability of the agent. For example, the agent should adhere to the following TypeScript best practices:

   ## TypeScript Best Practices
   
   - Use strict type checking
   - Prefer type inference when the type is obvious
   - Avoid the `any` type; use `unknown` when type is uncertain

6. We can customize the instructions file according to our needs. Add the following in the State Management heading:

   - Define signal properties as `readonly`

   The preceding instruction will guide Copilot to declare signals with the readonly keyword.

The Markdown format of the instructions file makes it accessible to all developers. You now understand how easy it is to extend it and share it with other members of your development team. In the following section, we will learn how Copilot uses instructions to interact with our Angular application.

Developing with prompts

GitHub Copilot is pre-installed and enabled by default in the latest version of VS Code. It opens automatically in the CHAT side panel when we load an Angular application.

The CHAT panel features a welcome screen and an input box that allows us to interact with Copilot using prompts:

Figure 1.1 – GitHub Copilot

First, we will use Copilot to refactor the existing code base of the Angular application.

We will create a new property in the App component class for chapter titles:

1. Enter the following phrase in the input box of Copilot and click the Send button:

   Create a signal in the App component for storing the chapter title with the following value: Chapter 1: Angular AI Kick-Starter.

2. You must sign in to Copilot before starting to interact with it. Select a sign-in method in the following dialog:

   

   Figure 1.2 – Sign in to use GitHub Copilot

   After the sign-in process is complete, Copilot creates a chapterTitle property in the App component class.

3. Copilot follows up on our prompt with a suggestion to update the chapter title in the component template.

   Enter the following prompt:

   Update the title in the template according to the chapter title.

   Copilot changes the line in the template file that displayed the title property to the following:

   <h1>{{ chapterTitle() }}</h1>

4. Run the application using the ng serve command and navigate to localhost:4200:

   

   Figure 1.3 – Application output

You have learned how to refactor an existing Angular application without needing to interact with the code. Copilot did all the required work using prompts.

We can use Copilot for more complicated tasks, such as creating new components and services:

1. Click the plus button located in the header of the CHAT panel to create a new Copilot session.
2. Enter the following prompt in the input box:

   Create a component responsible for displaying the chapter title and use it in the App component.

   The previous prompt will create a new component based on the Components best practices from the instructions file.

3. The new component passes the value of the chapterTitle property using an input signal. Examine the browser to verify that the application output is still the same.

You now understand how much faster it is to develop Angular applications with Copilot. We learned how to create a component without using the Angular CLI. You can use the same process to generate different parts of an Angular application, such as services and directives.

In this chapter, we learned how to build an Angular application with AI assistive technology. We kick-started the project by installing the Angular CLI and scaffolding a new application. We created a VS Code profile to leverage Angular extensions during development. We used the integrated chat to let GitHub Copilot assist us while writing new code or refactoring existing code.

We now have all the required tools for building our first real-world application in the next chapter, in which we will develop a tracking system to manage and report issues.

Use GitHub Copilot to create an Angular service that contains the current chapter title. Modify the App component so that it uses the service to pass the chapter title to the respective component.

Try experimenting with different prompts to see how the results vary for each one.

• Angular CLI: https://angular.dev/tools/cli
• Profiles: https://code.visualstudio.com/docs/configure/profiles
• Angular AI prompts: https://angular.dev/ai/develop-with-ai
• GitHub Copilot: https://github.com/features/copilot

Get this book's PDF copy, code bundle, and more

Scan the QR code (or go to packtpub.com/unlock). Search for this book by name, confirm the edition, and then follow the steps on the page.

Note: Have your invoice handy. Purchases made directly from the Packt website don't require an invoice.