Setting up the Angular CLI workspace

Setting up a frontend project today is more cumbersome than ever. We used to manually include the necessary JavaScript and CSS files in our HTML. Life used to be simple. Then frontend development became more ambitious: we started splitting our code into modules and using special tools called preprocessors for our code and CSS.

Our projects became more complicated, and we started to rely on build systems to bundle our applications. As developers, we are not huge fans of configuration—we want to focus on building awesome apps. However, modern browsers do more to support the latest web standards, and some have even started to support JavaScript modules. That said, this is far from being widely supported. In the meantime, we still have to rely on bundling and module support tools.

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. Scaffolder tools almost become necessary as complexity grows and where every hour counts towards 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, and create a production-grade bundle. The Angular CLI supports all of this with the use of special commands.

Prerequisites

Before we begin, we need to ensure that our development environment includes a set of 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 in the command line to check which version you are running. The Angular CLI uses Node.js to accomplish specific tasks, such as serving, building, and bundling your application.

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 that are 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 for creating Angular projects, we need to install it globally in our system. Open a terminal and run the following command:

npm install -g @angular/cli

On some Windows systems, you may need elevated permissions, so you should run your terminal as an administrator. In Linux/macOS systems, run the command using the sudo keyword.

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

• install or i: Denotes the installation of a package
• -g: 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 major version as the Angular framework, which in this book is 15. 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 Angular CLI 15, you can run the following command:

npm install -g @angular/cli@15

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

CLI commands

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

ng command [options]

Here, the 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 also be invoked using an alias instead of the actual command name. In this book, we revise 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 (s): Builds an Angular application and serves it using a pre-configured web server.
• test (t): Runs unit tests of an Angular application.
• deploy: Deploys an Angular application to a web-hosting provider. You can choose from a collection of providers included in the Angular CLI.
• add: Installs an Angular library to an Angular application.
• completion: Enables auto-complete for Angular CLI commands through the terminal.
• update: Updates an Angular application to the latest Angular version.

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

Try to keep your Angular projects up to date because each new version of Angular comes packed with many exciting new features, performance improvements, and bug fixes.

Additionally, you can use the Angular upgrade guide that contains tips and step-by-step instructions on how to update your application at https://update.angular.io.

Creating a new project

Now that we have prepared our development environment, we can start creating magic by scaffolding our first Angular application. We use the new command of the Angular CLI and pass the name of the application that we want to create as an option. To do so, go to a folder of your choice and type the following:

ng new my-app

Creating a new Angular application is a straightforward process. The Angular CLI will ask you for details about the application you want to create so that it can scaffold the Angular project as best as possible. Initially, it will ask if you 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.io/analytics. (y/N)

The Angular CLI will only ask the previous question once when you create your first Angular project and apply it globally in your system. However, you can change the setting later in a specific Angular workspace. Next, it will ask if you want to include routing in your application:

Would you like to add Angular routing? (y/N)

Routing is related to navigating from one view of your application to another, which we will learn later in Chapter 9, Navigate through Application with Routing. For now, answer No to the question and press Enter. The next question is related to the styling of your application:

Which stylesheet format would you like to use? (Use arrow keys)

It is common to use CSS for styling Angular applications. However, you can use preprocessors like SCSS or Less to add value to your development workflow. In this book, we work with CSS directly, so accept the default choice, CSS, and press 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, test, and publish the Angular application:

• .vscode: Includes VS Code configuration files
• node_modules: Includes npm packages needed for development and running the Angular application
• src: Contains the source files of the application
• .editorconfig: Defines coding styles for your editor
• .gitignore: Specifies 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: TypeScript configuration that is specific to the Angular application
• tsconfig.json: TypeScript configuration that is specific to the Angular CLI workspace
• tsconfig.spec.json: TypeScript configuration that is specific to unit tests

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

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

ng serve

Remember that any Angular CLI commands must be run inside an Angular CLI workspace folder.

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, by default, a sample web page that we can use as a reference and start building our project based on that. In the next section, we will explore the main parts of our application and learn how to modify this page.