Chapter 2: Project Setup

Before we dive into components, directives, and state management, we need to set up an Angular project. Angular offers a powerful CLI (Command Line Interface) that simplifies installation, scaffolding, and development.

2.1 Prerequisites

To follow along, ensure you have:

Node.js (LTS version recommended, e.g., v18+).
npm (comes with Node) or yarn/pnpm as a package manager.
A code editor (VS Code is highly recommended).

Check your installation:

node -v
npm -v

2.2 Installing Angular CLI

The Angular CLI makes it easy to create and manage projects.

Install globally:

npm install -g @angular/cli

Verify installation:

ng version

2.3 Creating a New Project

Generate a new Angular project using:

ng new my-app

CLI prompts:

Would you like to add Angular routing? → Yes (so we have navigation support).
Which stylesheet format would you like to use? → Choose (CSS, SCSS, or LESS).

Navigate to the project folder:

cd my-app

Start the development server:

ng serve

Open http://localhost:4200 to see your app running. 🎉

2.4 Project Structure

The generated app contains several files and folders. Let’s break them down:

my-app/
 ├── src/
 │   ├── app/
 │   │   ├── app.component.ts      # Root component logic
 │   │   ├── app.component.html    # Root component template
 │   │   ├── app.component.css     # Styles for root component
 │   │   └── app.routes.ts         # Routes definition (standalone-first)
 │   ├── assets/                   # Static assets (images, icons)
 │   ├── index.html                # Entry point HTML
 │   ├── main.ts                   # Bootstraps Angular app
 │   └── styles.css                # Global styles
 ├── angular.json                  # CLI configuration
 ├── package.json                  # Dependencies and scripts
 ├── tsconfig.json                 # TypeScript configuration
 └── README.md                     # Project instructions

Key files:

main.ts: Entry point that bootstraps the Angular app.
app.component.ts: Root component.
app.routes.ts: Defines routing (standalone-first).
angular.json: CLI build and serve config.

2.5 Bootstrapping with Standalone Components

By default (Angular 17+), projects use standalone-first architecture.

main.ts:

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { AppComponent } from './app/app.component';
import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes)]
});

👉 No AppModule is required — the app starts with AppComponent.

2.6 Development Workflow

Common CLI commands:

ng serve → Run dev server.
ng generate component hello → Generate a component.
ng generate service auth → Generate a service.
ng test → Run unit tests.
ng build → Build for production.

2.7 Summary

Installed Angular CLI for scaffolding and management.
Created a new Angular project with ng new.
Explored the project structure and key files.
Learned that Angular 17+ uses standalone-first bootstrapping.
Got familiar with common development commands.

In the next chapter, we’ll dive into Components, the building blocks of Angular applications, learning how to create, structure, and reuse them.

Keyboard shortcuts