# NG Guide β complete content
The one-stop Angular 22 guide. Source: https://ng-guide.letsprogram.in/
---
# Welcome & Course Overview π
> Start here β what NG Guide covers, who it is for, how the course is organised and how to get the most out of it while learning Angular 22.
Source: https://ng-guide.letsprogram.in/introduction/
Welcome to **NG Guide**, a free and complete course for learning Angular. Whether you have never
written a line of Angular or you have used it for years and want to catch up with the latest
features, this guide takes you from the basics to production-ready apps β one small step at a time.
Everything here is written for **Angular 22** (the current stable release). When something worked
differently in older versions, you will see a short note so you can still read older code.
## What you'll learn on this page
- What Angular is, in one minute
- What "modern Angular" means and why it matters
- How the course is organised and who it is for
- What you need before you start
## Angular in one minute
Angular is an open-source **framework for building web applications**, maintained by a team at
Google. Instead of giving you only a UI library, Angular ships everything a real app needs:
| You need to⦠| Angular gives you⦠|
| --- | --- |
| Build the UI out of reusable pieces | **Components** with HTML templates and scoped CSS |
| Keep the screen in sync with your data | **Signals** β a fine-grained reactivity system |
| Share logic and data between screens | **Services** and **dependency injection** |
| Move between pages | The **Router** (lazy loading, guards, resolvers) |
| Collect and validate user input | **Forms** (Signal Forms, Reactive Forms, template-driven) |
| Talk to a backend | **HttpClient** and `httpResource()` |
| Create, run, test and build projects | The **Angular CLI** (`ng new`, `ng serve`, `ng test`, `ng build`) |
| Render on the server for speed and SEO | **SSR**, prerendering (SSG) and hydration |
Here is a complete Angular component. Don't worry about the details yet β you will learn every
line of it in the beginner section:
```ts title="counter.ts"
import { Component, computed, signal } from '@angular/core';
@Component({
selector: 'app-counter',
template: `
You clicked {{ count() }} times (double: {{ double() }})
`,
})
export class Counter {
protected readonly count = signal(0);
protected readonly double = computed(() => this.count() * 2);
protected increment() {
this.count.update((value) => value + 1);
}
}
```
When you click the button, `count` changes and Angular updates exactly the parts of the page
that read it. That is the heart of modern Angular.
## What "modern Angular" means
Angular has changed a lot in the last few years. If you find an old tutorial online, it may look
very different from the code in this guide. Here is what changed:
| Older Angular | Modern Angular (what this guide teaches) |
| --- | --- |
| `NgModule`s everywhere | **Standalone components** (the default) |
| `*ngIf`, `*ngFor`, `*ngSwitch` | Built-in control flow: **`@if`, `@for`, `@switch`** |
| `@Input()` / `@Output()` decorators | **`input()`, `output()`, `model()`** functions |
| Constructor injection | The **`inject()`** function |
| `@Injectable({ providedIn: 'root' })` | The **`@Service()`** decorator (new in v22) |
| Plain class fields + zone.js | **Signals** + **zoneless** change detection |
| Karma + Jasmine tests | **Vitest** (the default test runner since v21) |
| `component.ts` / `app.component.ts` file names | Short names: `app.ts`, `user-card.ts` |
> **Tip**
>
> You don't need to learn the "old way" first. Learn the modern way, then use our
> [Migration Guides](/migration/version-upgrade/) when you meet older code at work.
## How this course is organised
The course is split into sections that build on each other. The
[Learning Path Guide](/learning-path/) turns them into a week-by-week plan.
| Section | What you'll learn |
| --- | --- |
| π **Getting Started** | Prerequisites, tool setup and how to use this guide |
| π± **Beginner** | Components, templates, directives, services, routing, forms, HTTP |
| π **Intermediate** | Component communication, lifecycle hooks, reactive forms, advanced routing, RxJS, state, pipes, Angular Material |
| β‘ **Modern Angular** | Signals, `computed`, effects, `linkedSignal`, Resource API, `httpResource`, Signal Forms, control flow, `@let`, zoneless, hydration |
| ποΈ **Advanced** | Custom directives, dynamic components, content projection, advanced DI, Angular Elements, micro frontends, performance |
| π **RxJS** | Observables, subjects, operators, error handling and RxJS patterns in Angular |
| π§ͺ **Testing** | Unit, component, service and integration tests with Vitest, mocking, coverage, and Playwright E2E tests |
| π **SSR** | Server-side rendering, static generation, hydration, render modes and event replay |
| π **Deployment** | Hosting options, Docker and CI/CD pipelines |
| πΌ **Projects** | Todo app, blog platform, dashboard, e-commerce store, chat app and PWA |
| π **Migration** | Upgrading versions and moving to standalone, signals and other modern APIs |
| π οΈ **Tools** | Angular CLI, VS Code, Angular DevTools, debugging, ESLint, Prettier, schematics, Git hooks |
| π€ **Angular + AI** | The Angular CLI MCP server, AI config files and agent skills β see [Angular + AI](/ai/overview/) |
| π **Resources** | Best practices, patterns, cheat sheet, performance checklist, troubleshooting |
Every page follows the same shape: a short intro, **what you'll learn**, concepts with small
examples, **common mistakes** or best practices, **key takeaways**, and links to what to read next.
## Who this course is for
- **Complete beginners** who know some HTML, CSS and JavaScript and want to learn a framework.
- **Developers coming from React, Vue or Svelte** who want to understand how Angular does things.
- **Backend developers** moving into frontend work.
- **Angular developers** who learned an older version and want to catch up with signals,
standalone components, Signal Forms, zoneless and Vitest.
- **Team leads** planning a new Angular project or modernising an existing one.
## What you need
**Knowledge:** basic HTML, CSS and JavaScript. TypeScript helps, but you can learn it as you go β
the [Prerequisites](/prerequisites/) page lists exactly what to know.
**Tools:**
- **Node.js** 22.22.3+, 24.15+ or 26 (Angular 22 does not support Node.js 20)
- **Angular CLI** 22 (`npm install -g @angular/cli`)
- **A code editor** β VS Code with the Angular Language Service extension is a great choice
- **A modern browser** with the Angular DevTools extension
The [Development Environment](/setup/) page walks you through installing all of them.
## How to get the most out of this guide
1. **Type the code yourself.** Copying is fine, but typing makes it stick.
2. **Change things and break things.** Then read the error message β Angular's errors are helpful.
3. **Build the projects.** The [Projects](/projects/todo-app/) section is where everything clicks.
4. **Don't rush.** Short daily sessions beat one long weekend session.
## Key takeaways
- Angular is a complete, TypeScript-first framework for building web apps.
- This guide teaches **Angular 22** with modern APIs: standalone components, signals,
`inject()`, `input()`/`output()`, built-in control flow, `@Service()` and Vitest.
- The course goes from beginner to advanced, with testing, SSR, deployment, real projects and AI
tooling along the way.
## Next steps
1. **[Prerequisites](/prerequisites/)** β check what you should know before you start
2. **[Development Environment](/setup/)** β install Node.js, the Angular CLI and your editor
3. **[Learning Path Guide](/learning-path/)** β choose a plan that fits your experience
4. **[What is Angular?](/beginner/what-is-angular/)** β begin the beginner section
---
## About the author
I believe knowledge should be accessible to everyone, so NG Guide is free and built from
real-world experience of shipping Angular apps.
**Connect with me:**
- [YouTube β Let's Program](https://youtube.com/@letsprogram30)
- [Blog](https://letsprogram.in)
- [Portfolio](https://sashikumar.dev)
- [LinkedIn](https://linkedin.com/in/sashikumar-yadav/)
Happy learning! π
---
# Prerequisites & Setup π
> What you should know before learning Angular 22 β the HTML, CSS, JavaScript and TypeScript basics, plus a quick checklist to test your setup.
Source: https://ng-guide.letsprogram.in/prerequisites/
You don't need to be an expert to start learning Angular, but a few basics will make the journey
much smoother. This page lists exactly what to know, gives you a quick TypeScript crash course,
and helps you check that your computer is ready.
## What you'll learn
- Which HTML, CSS and JavaScript skills Angular builds on
- The TypeScript features you will see on almost every Angular page
- Which tools you need (and which versions)
- How to check that everything works before you start
## Must-have knowledge
### HTML & CSS
- Common elements (`div`, `section`, `button`, `form`, `input`, `ul`/`li`) and attributes
- Semantic HTML (`header`, `main`, `nav`, `footer`) and accessible labels
- CSS selectors, the box model, Flexbox and Grid
- Basic responsive design (media queries)
Sass/SCSS or Tailwind CSS are optional β Angular supports both, and plain CSS is perfectly fine.
### JavaScript (ES2015+)
You should be comfortable reading and writing code like this:
```ts
// const/let, arrow functions and template literals
const greet = (name: string) => `Hello, ${name}!`;
// Destructuring and spread
const user = { name: 'Ada', role: 'admin', active: true };
const { name, ...rest } = user;
const updated = { ...user, active: false };
const numbers = [1, 2, 3];
const more = [...numbers, 4];
// Array methods you will use all the time
const evens = more.filter((n) => n % 2 === 0);
const doubled = more.map((n) => n * 2);
const total = more.reduce((sum, n) => sum + n, 0);
// Optional chaining and nullish coalescing
const city = (user as { address?: { city?: string } }).address?.city ?? 'Unknown';
// Promises and async/await
async function loadUsers() {
const response = await fetch('/api/users');
return response.json();
}
// Modules
// export function formatPrice(value: number) { ... }
// import { formatPrice } from './format-price';
```
> **Why immutability matters**
>
> Angular's signals notice changes when you give them a **new** value. Spreading
> (`{ ...user, active: false }`, `[...list, item]`) instead of mutating objects in place is a habit you
> will use constantly.
### TypeScript basics
Angular is written in TypeScript and every Angular project uses it. If you know JavaScript, you
already know most of TypeScript β it adds **types** on top. These are the features you'll see most:
```ts
// 1. Type annotations
let title: string = 'My app';
let count = 0; // inferred as number
// 2. Interfaces and type aliases describe the shape of data
interface Product {
id: number;
name: string;
price: number;
description?: string; // optional property
}
// 3. Union types β a value can be one of several options
type Status = 'idle' | 'loading' | 'success' | 'error';
let status: Status = 'idle';
// 4. Generics β reusable types with a "type parameter"
const products: Array = [];
function first(items: T[]): T | undefined {
return items[0];
}
// 5. Classes with access modifiers and readonly fields
class Cart {
private readonly items: Product[] = [];
add(product: Product): void {
this.items.push(product);
}
protected get size(): number {
return this.items.length;
}
}
```
In Angular you will also see **decorators** such as `@Component()` and `@Service()`. A decorator is
just a function that attaches extra information (metadata) to a class. You don't need to write your
own β you only use the ones Angular provides.
> **Note**
>
> New Angular 22 projects use **TypeScript 6.0** in **strict mode**, so the compiler catches mistakes
> such as possibly-`undefined` values early. That can feel strict at first, but it prevents many
> bugs. The [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html) is a great
> free reference.
### The command line
You will run commands like `ng serve` and `npm install` in a terminal. Know how to:
- Open a terminal (VS Code has one built in: Ctrl+`)
- Move between folders with `cd` and list files with `ls` (or `dir` on Windows)
- Stop a running command with Ctrl+C
### How the web works (basics)
- What HTTP requests and responses are (`GET`, `POST`, `PUT`, `DELETE`, status codes)
- What JSON looks like
- What a REST API is
## Nice to have (we'll teach these)
You **don't** need these before you start β the guide covers them:
- Reactive programming and [RxJS](/rxjs/fundamentals/) Observables
- [Signals](/modern/signals/) and fine-grained reactivity
- Testing with [Vitest](/testing/unit-testing/)
- Git (helpful for saving your progress β `ng new` initialises a Git repository for you)
If you already know another framework (React, Vue, Svelte), many ideas transfer directly:
components, props (Angular **inputs**), events (Angular **outputs**), and reactive state (Angular
**signals**).
## Tools and versions
| Tool | Version for Angular 22 | Check with |
| --- | --- | --- |
| Node.js | `^22.22.3`, `^24.15.0` or `>=26.0.0` | `node --version` |
| npm (comes with Node.js) β or pnpm, Yarn, Bun | any recent version | `npm --version` |
| Angular CLI | 22.x | `ng version` |
| Code editor | VS Code, WebStorm, or any editor with the Angular Language Service | β |
| Browser | A current Chrome, Edge or Firefox + Angular DevTools | β |
> **Node.js 20 is not supported**
>
> Angular 22 dropped support for Node.js 20. If `node --version` prints `v20.x` (or an older
> 22.x/24.x release), upgrade first β see [Development Environment](/setup/).
You don't need to install TypeScript globally β every Angular project includes its own TypeScript
version in `package.json`.
## Quick readiness check
### Knowledge checklist
- [ ] I can write a function with an arrow function and a template literal
- [ ] I can use `map`, `filter` and spread (`...`) on arrays and objects
- [ ] I understand `async`/`await` and what a Promise is
- [ ] I can read a TypeScript `interface` and a union type like `'a' | 'b'`
- [ ] I can build a simple page with HTML and style it with CSS
### Environment test
Once you have installed Node.js and the Angular CLI (see [Development Environment](/setup/)), run:
```bash
# Create a test project with all the defaults (no questions asked)
ng new angular-test --defaults
# Move into the project and start the dev server
cd angular-test
ng serve
```
Open `http://localhost:4200` in your browser. If you see the Angular welcome page, you are ready! π
Press Ctrl+C in the terminal to stop the server.
## Want to brush up first?
- [MDN: JavaScript Guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide) β the
best free JavaScript reference
- [javascript.info](https://javascript.info/) β a friendly, complete JavaScript tutorial
- [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html) β official TS docs
- [MDN: Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) β
HTML, CSS and HTTP from scratch
## Key takeaways
- You need basic HTML, CSS and modern JavaScript; TypeScript basics you can learn as you go.
- Angular 22 needs **Node.js 22.22.3+, 24.15+ or 26** and uses **TypeScript 6.0** in strict mode.
- `ng new` + `ng serve` is the quickest way to check your setup.
## Next steps
Pick the path that matches your experience:
**New to Angular**
1. [Development Environment](/setup/) β install and configure your tools
2. [Learning Path Guide](/learning-path/) β plan your journey
3. [What is Angular?](/beginner/what-is-angular/) β start from the beginning
**Used another framework**
1. [Development Environment](/setup/)
2. [Angular Architecture](/beginner/architecture/) β see how the pieces fit together
3. [Your First App](/beginner/first-app/) β build something real
**Used an older Angular version**
1. [Standalone Components](/modern/standalone-components/) and [Signals](/modern/signals/)
2. [Control Flow](/modern/control-flow/) and [Signal Forms](/modern/signal-forms/)
3. [Version Upgrades](/migration/version-upgrade/) β bring existing apps up to Angular 22
---
# Development Environment π οΈ
> Set up Angular 22 step by step β Node.js versions, the Angular CLI, ng new prompts and flags, the project structure, VS Code, DevTools and AI config.
Source: https://ng-guide.letsprogram.in/setup/
Let's get your computer ready for Angular development. By the end of this page you will have
Node.js, the Angular CLI, a fresh Angular 22 project running in your browser, and an editor that
understands Angular templates.
## What you'll learn
- Which Node.js versions Angular 22 supports and how to install one
- How to install the Angular CLI and create a project with `ng new`
- What every prompt and important flag of `ng new` does
- What each file in a new Angular 22 project is for
- How to set up VS Code, Angular DevTools and (optionally) AI assistants
## Quick checklist
- [ ] Node.js `^22.22.3`, `^24.15.0` or `>=26.0.0`
- [ ] Angular CLI 22 installed
- [ ] A new project created with `ng new` and running with `ng serve`
- [ ] Editor with the **Angular Language Service** extension
- [ ] Browser with **Angular DevTools**
## Step 1: Install Node.js
The Angular CLI runs on [Node.js](https://nodejs.org/). Angular 22 supports these versions:
| Angular | Node.js | TypeScript | RxJS |
| --- | --- | --- | --- |
| **22.x** | `^22.22.3 \|\| ^24.15.0 \|\| >=26.0.0` | `>=6.0 <6.1` | `^6.5.3 \|\| ^7.4.0` |
| 21.x | `^20.19.0 \|\| ^22.12.0 \|\| ^24.0.0` | `>=5.9 <6.0` | `^6.5.3 \|\| ^7.4.0` |
| 20.x | `^20.19.0 \|\| ^22.12.0 \|\| ^24.0.0` | `>=5.8 <6.0` | `^6.5.3 \|\| ^7.4.0` |
Check what you have:
```bash
node --version
# e.g. v24.15.0 β v20.19.0 β (not supported by Angular 22)
```
**Recommended:** install the latest **LTS** (long-term support) release from
[nodejs.org](https://nodejs.org/), or use a version manager so you can switch versions per project:
```bash
# macOS / Linux with nvm (https://github.com/nvm-sh/nvm)
nvm install 24
nvm use 24
# Windows: use the official installer, or nvm-windows / fnm
```
> **Tip**
>
> Stick to even-numbered (LTS) Node.js releases. The Angular CLI prints a warning when you use an
> odd-numbered release such as 25.x, because those are not supported for production.
## Step 2: Install the Angular CLI
The **Angular CLI** (`ng`) creates projects, generates code, runs the dev server, runs tests and
builds for production. Install it globally with your package manager of choice:
```bash
npm install -g @angular/cli # npm
pnpm install -g @angular/cli # pnpm
yarn global add @angular/cli # Yarn
bun install -g @angular/cli # Bun
```
Then check it works:
```bash
ng version
```
You should see `Angular CLI: 22.x.x` along with your Node.js version and package manager.
> **Prefer not to install globally?**
>
> You can run any CLI command with `npx`, e.g. `npx @angular/cli@latest new my-app`. Inside a
> project, `npx ng serve` uses the project's own CLI version.
## Step 3: Create a new project
```bash
ng new my-app
```
The CLI asks a few questions. Use the arrow keys and Enter; if you're unsure, accept
the defaults.
| Prompt | Choices | Our advice |
| --- | --- | --- |
| **What name would you like to use for the new workspace and initial project?** | any name (e.g. `my-app`) | Only asked if you didn't type one |
| **Which stylesheet system would you like to use?** | CSS, Tailwind CSS, Sass (SCSS), Sass (Indented), Less | CSS is perfect for learning; Tailwind sets everything up for you |
| **Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)?** | Yes / No (default: No) | No for now β you can add it later with `ng add @angular/ssr` |
| **Which AI tools should Angular integrate with?** | None, Claude Code, Cursor, Gemini CLI, Open AI Codex, VSCode | Pick the assistant you use, or None (see [Step 7](#step-7-optional-set-up-ai-assistants)) |
The CLI then creates the files, installs the npm packages and makes an initial Git commit.
### What a new Angular 22 project gives you
You don't need to configure any of this β it's the default:
| Default | What it means |
| --- | --- |
| **Standalone components** | No `NgModule`s. Each component lists what it uses in `imports`. |
| **Zoneless** | No `zone.js`. Angular updates the screen when signals change, template events fire, or inputs change (default since v21). |
| **OnPush change detection** | Components skip unnecessary checks by default (since v22) β you don't write `changeDetection` any more. |
| **Routing** | `app.routes.ts` and `provideRouter(routes)` are ready to use. |
| **Vitest** | `ng test` runs your unit tests with Vitest (default since v21). |
| **Strict TypeScript + strict templates** | TypeScript 6 and the Angular compiler are strict by default, so many bugs are caught at build time. |
| **Prettier** | A `.prettierrc` file and the `prettier` dev dependency for consistent formatting. |
| **Short file names** | `app.ts`, `app.html`, class `App` β no `.component` suffix (the "2025" style guide). |
| **Fast builds** | The `@angular/build:application` builder (esbuild + Vite). |
### Useful `ng new` flags
Skip the prompts or change the defaults with flags:
```bash
# Accept every default without being asked
ng new my-app --defaults
# Pick options up front
ng new my-app --style=scss --ssr=false --ai-config=vscode
# Use a different package manager
ng new my-app --package-manager=pnpm
```
| Flag | Values (default) | What it does |
| --- | --- | --- |
| `--style` | `css` \| `scss` \| `sass` \| `less` \| `tailwind` (`css`) | Stylesheet format |
| `--ssr` | boolean (`false`) | Adds SSR + prerendering (`server.ts`, `main.server.ts`, β¦) |
| `--ai-config` | `none`, `claude-code`, `cursor`, `gemini-cli`, `open-ai-codex`, `vscode` | Generates AI instruction + MCP config files |
| `--routing` | boolean (`true`) | Sets up the router |
| `--zoneless` | boolean (`true`) | `--zoneless=false` adds zone.js and `provideZoneChangeDetection()` |
| `--test-runner` | `vitest` \| `karma` (`vitest`) | Unit test runner |
| `--package-manager` | `npm` \| `pnpm` \| `yarn` \| `bun` | Package manager to install with |
| `--prefix` | string (`app`) | Prefix for component selectors (`app-header`) |
| `--inline-style` / `-s` | boolean | Put the root component's CSS in `app.ts` |
| `--inline-template` / `-t` | boolean | Put the root component's HTML in `app.ts` |
| `--skip-tests` / `-S` | boolean | Don't create `.spec.ts` files |
| `--skip-git` / `-g` | boolean | Don't initialise a Git repository |
| `--skip-install` | boolean | Don't run `npm install` |
| `--minimal` | boolean | No testing setup β for quick experiments only |
| `--file-name-style-guide` | `2025` \| `2016` (`2025`) | `2016` brings back `app.component.ts`-style names |
| `--directory` | path | Create the workspace in a different folder |
Run `ng new --help` to see every option.
## Step 4: Run the app
```bash
cd my-app
ng serve # or: npm start
```
```text
β Local: http://localhost:4200/
β press h + enter to show help
```
Open `http://localhost:4200`. π Leave `ng serve` running while you work β when you save a file, the
browser updates automatically (template and style changes are hot-replaced without a full reload).
```bash
ng serve --open # open the browser for you (-o)
ng serve --port 4300 # use another port
```
> **Note**
>
> In Angular 22 the `PORT` environment variable, if set, takes priority over `--port` and
> `angular.json`.
## Step 5: Understand the project structure
Here is what `ng new my-app` creates (with the default answers):
```text
my-app/
βββ .vscode/ # Recommended VS Code extension, launch & task configs
βββ node_modules/ # Installed packages (never edit, never commit)
βββ public/
β βββ favicon.ico # Static files copied as-is to the build output
βββ src/
β βββ app/
β β βββ app.ts # Root component class (App)
β β βββ app.html # Root component template
β β βββ app.css # Root component styles (scoped to App)
β β βββ app.spec.ts # Unit tests for App (Vitest)
β β βββ app.config.ts # Application-wide providers (router, HTTP, β¦)
β β βββ app.routes.ts # Route definitions
β βββ index.html # The single HTML page; contains
β βββ main.ts # Entry point: bootstraps the App component
β βββ styles.css # Global styles
βββ .editorconfig # Editor formatting basics (indentation, charset)
βββ .gitignore
βββ .prettierrc # Prettier formatting rules
βββ angular.json # Workspace & build configuration
βββ package.json # Dependencies and npm scripts
βββ README.md
βββ tsconfig.json # Shared TypeScript + Angular compiler options
βββ tsconfig.app.json # TypeScript config for the app
βββ tsconfig.spec.json # TypeScript config for tests
```
With `--ssr` you also get `src/server.ts`, `src/main.server.ts`, `src/app/app.config.server.ts` and
`src/app/app.routes.server.ts`. There is no `assets/` or `environments/` folder any more: put static
files in `public/`, and run `ng generate environments` if you need environment files.
### The key files
**`src/main.ts`** starts the app by bootstrapping the root component with the app config:
```ts title="src/main.ts"
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { App } from './app/app';
bootstrapApplication(App, appConfig)
.catch((err) => console.error(err));
```
**`src/app/app.config.ts`** lists application-wide **providers** β services and features such as
the router or `HttpClient`:
```ts title="src/app/app.config.ts"
import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
export const appConfig: ApplicationConfig = {
providers: [
provideBrowserGlobalErrorListeners(),
provideRouter(routes)
]
};
```
`provideBrowserGlobalErrorListeners()` reports uncaught errors and unhandled promise rejections to
Angular's `ErrorHandler`. Notice there is no `provideZoneChangeDetection()` β the app is zoneless.
**`src/app/app.ts`** is the root component. Its selector `app-root` matches the `` tag in
`index.html`:
```ts title="src/app/app.ts"
import { Component, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';
@Component({
imports: [RouterOutlet],
selector: 'app-root',
styleUrl: './app.css',
templateUrl: './app.html',
})
export class App {
protected readonly title = signal('my-app');
}
```
**`src/app/app.html`** contains a big placeholder welcome page. Somewhere inside it you'll find
`
Hello, {{ title() }}
` and, at the very end, ``, where routed pages
appear. You'll replace this file in [Your First App](/beginner/first-app/).
**`angular.json`** configures the `build` (`@angular/build:application`), `serve`
(`@angular/build:dev-server`) and `test` (`@angular/build:unit-test`) targets β including bundle
size **budgets** that warn you when your app grows too large.
**`package.json`** contains handy scripts:
| Script | Runs | Purpose |
| --- | --- | --- |
| `npm start` | `ng serve` | Dev server on port 4200 |
| `npm run build` | `ng build` | Production build into `dist/my-app/` |
| `npm run watch` | `ng build --watch --configuration development` | Rebuild on every change |
| `npm test` | `ng test` | Run unit tests with Vitest |
### Generate code with the CLI
Use `ng generate` (or `ng g`) instead of creating files by hand:
```bash
ng generate component user-card # src/app/user-card/user-card.ts, .html, .css, .spec.ts
ng generate service user-store # src/app/user-store.ts (uses @Service()) + spec
ng generate pipe initials
ng generate directive highlight
ng generate guard auth
```
See the [Angular CLI](/tools/angular-cli/) page for every command.
## Step 6: Set up your editor
### VS Code (recommended)
Install [Visual Studio Code](https://code.visualstudio.com/). When you open a new Angular project,
VS Code suggests the extension listed in `.vscode/extensions.json`:
| Extension | ID | Why |
| --- | --- | --- |
| **Angular Language Service** | `angular.ng-template` | Autocomplete, errors, go-to-definition and quick info **inside templates** |
| Prettier | `esbenp.prettier-vscode` | Formats code using the project's `.prettierrc` |
| ESLint (optional) | `dbaeumer.vscode-eslint` | Shows lint errors after you run `ng add angular-eslint` |
Suggested workspace settings (`.vscode/settings.json`):
```json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"typescript.preferences.quoteStyle": "single"
}
```
The generated `.vscode/launch.json` already contains an **"ng serve"** debug configuration, so you
can press F5 to start the app with the VS Code debugger attached. See
[VS Code Setup](/tools/vscode/) for more tips.
### Other editors
The Angular Language Service is also available for **WebStorm** (built in), **Zed**, **Neovim**,
**Sublime Text** and **Eclipse IDE**.
## Step 7 (optional): Set up AI assistants
Angular 22 has first-class support for AI coding assistants. If you answered the
**"Which AI toolsβ¦"** prompt, the CLI already created these files. You can add them to any existing
project too:
```bash
ng generate ai-config # asks which tools you use
ng generate ai-config --tool=vscode
```
| Tool | Files created |
| --- | --- |
| Claude Code | `CLAUDE.md` + `.mcp.json` |
| Cursor | `AGENTS.md` + `.cursor/mcp.json` |
| Gemini CLI | `.gemini/GEMINI.md` + `.gemini/settings.json` |
| OpenAI Codex | `AGENTS.md` + `.codex/config.toml` |
| VS Code | `AGENTS.md` + `.vscode/mcp.json` |
- The **instruction file** (`AGENTS.md`, `CLAUDE.md`, `GEMINI.md`) teaches the assistant modern
Angular best practices, so it writes signals and `@if` instead of outdated code.
- The **MCP config** connects the assistant to the **Angular CLI MCP server** (`ng mcp`), which lets
it search the official docs, find examples, list your projects, build, test and more.
For example, `.vscode/mcp.json` looks like this:
```json title=".vscode/mcp.json"
{
"servers": {
"angular-cli": {
"command": "npx",
"args": ["-y", "@angular/cli", "mcp"]
}
}
}
```
Learn more in [Angular MCP Server](/ai/mcp-server/) and
[AI Config, Rules & Skills](/ai/ai-config-and-skills/), or start with the
[Angular + AI overview](/ai/overview/).
## Step 8: Install Angular DevTools
**Angular DevTools** is a browser extension for inspecting your running app: the component tree,
inputs and signal values, the dependency-injection tree, the router tree and a change-detection
profiler.
- [Chrome Web Store](https://chrome.google.com/webstore/detail/angular-developer-tools/ienfalfjdbdpebioblfackkekamfmbnh) (works in Chrome and Edge)
- [Firefox Add-ons](https://addons.mozilla.org/firefox/addon/angular-devtools/)
Open your app (in development mode), press F12 and look for the **Angular** tab. See
[Angular DevTools](/tools/devtools/) for a full walkthrough.
## Optional extras
Add official and community packages with `ng add`, which installs **and** configures them:
```bash
ng add @angular/material # Material Design components (+ CDK)
ng add @angular/ssr # Server-side rendering for an existing app
ng add angular-eslint # Linting with `ng lint`
```
Enable tab-completion for `ng` commands in your shell:
```bash
ng completion
```
## Troubleshooting
**"The Angular CLI requires a minimum Node.js versionβ¦"** β your Node.js is too old (for example
v20). Install a supported version (Step 1) and reinstall the CLI.
**`ng: command not found`** β the global npm folder isn't on your `PATH`. Close and reopen the
terminal, or use `npx ng β¦` inside a project.
**PowerShell: "running scripts is disabled on this system"** (Windows) β allow scripts for your user:
```powershell
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
```
**`EACCES: permission denied`** when installing globally (macOS/Linux) β avoid `sudo` where you can;
installing Node.js with a version manager such as nvm puts global packages in your home folder.
**Port 4200 is already in use** β stop the other server, or run `ng serve --port 4300`.
**Strange build errors after switching branches or upgrading** β clear the build cache:
```bash
ng cache clean
```
**Still stuck?** Check the versions of everything:
```bash
node --version
npm --version
ng version
```
## Key takeaways
- Angular 22 needs **Node.js 22.22.3+, 24.15+ or 26**; install the CLI with `npm install -g @angular/cli`.
- `ng new` asks about **styles, SSR and AI tools**; everything else (standalone, zoneless, OnPush,
routing, Vitest, strict mode, Prettier) is already set up for you.
- The app starts in `main.ts` β `bootstrapApplication(App, appConfig)`; providers live in
`app.config.ts`, routes in `app.routes.ts`.
- Install the **Angular Language Service** and **Angular DevTools** β they make learning much easier.
## Next steps
1. **[Learning Path Guide](/learning-path/)** β choose your route through the course
2. **[What is Angular?](/beginner/what-is-angular/)** β start the beginner section
3. **[Your First App](/beginner/first-app/)** β build a task manager in your new project
Need help? Join the [Let's Program Telegram community](https://t.me/letsprogramYt/1). π
---
# Learning Path Guide πΊοΈ
> A structured roadmap through NG Guide β from your first component to signals, testing, SSR, deployment, real projects and AI tooling with Angular 22.
Source: https://ng-guide.letsprogram.in/learning-path/
This page turns the whole guide into a clear plan. Follow it from top to bottom as a
**~20-week course** (about 6β10 hours a week), or jump to the phase that matches what you already
know. Every link below points to a page on this site.
## What you'll learn
- Where to start based on your current experience
- The order to read the guide in, phase by phase
- Which project to build at the end of each phase
- How to plan your study time
## Where should you start?
| Your experience | Start here |
| --- | --- |
| New to Angular (and maybe to frameworks) | [What is Angular?](/beginner/what-is-angular/) |
| You know React, Vue or Svelte | [Angular Architecture](/beginner/architecture/) β [Your First App](/beginner/first-app/) |
| You used Angular before signals/standalone (v16 or older) | [Standalone Components](/modern/standalone-components/) β [Signals](/modern/signals/) |
| You know modern Angular and want depth | [Advanced Topics](/advanced/custom-directives/), [Testing](/testing/unit-testing/), [SSR](/ssr/introduction/) |
| You need to upgrade an existing app | [Version Upgrades](/migration/version-upgrade/) β [Modernization](/migration/modernization/) |
> **Before you begin**
>
> Make sure you've read [Prerequisites](/prerequisites/) and set up your
> [Development Environment](/setup/). You need Node.js 22.22.3+, 24.15+ or 26 and Angular CLI 22.
## Phase 1 β Foundations (weeks 1β4) π±
Learn the building blocks every Angular app uses.
**Week 1: Getting started**
- [ ] [What is Angular?](/beginner/what-is-angular/)
- [ ] [Angular Architecture](/beginner/architecture/)
- [ ] [Your First App](/beginner/first-app/) β build a task manager
**Week 2: Components and templates**
- [ ] [Components Basics](/beginner/components/)
- [ ] [Templates & Data Binding](/beginner/templates/)
- [ ] [Directives](/beginner/directives/)
**Week 3: Services and data**
- [ ] [Services & DI](/beginner/services/)
- [ ] [HTTP Client](/beginner/http/)
**Week 4: Navigation and input**
- [ ] [Routing Basics](/beginner/routing/)
- [ ] [Forms Introduction](/beginner/forms/)
π **Milestone project:** a small multi-page app (list + detail + form) that loads data over HTTP.
The [Todo App with Signals](/projects/todo-app/) project is a great guided option.
## Phase 2 β Intermediate skills (weeks 5β8) π
Make components talk to each other, handle complex forms and navigation, and manage state.
**Week 5: Components in depth**
- [ ] [Advanced Components](/intermediate/advanced-components/)
- [ ] [Component Communication](/intermediate/component-communication/)
- [ ] [Lifecycle Hooks](/intermediate/lifecycle-hooks/)
**Week 6: Forms and pipes**
- [ ] [Reactive Forms](/intermediate/reactive-forms/)
- [ ] [Pipes & Custom Pipes](/intermediate/pipes/)
**Week 7: Routing and UI**
- [ ] [Advanced Routing](/intermediate/advanced-routing/) β lazy loading, guards, resolvers
- [ ] [Angular Material](/intermediate/material/)
**Week 8: Reactive data and state**
- [ ] [RxJS & Observables](/intermediate/rxjs/)
- [ ] [State Management](/intermediate/state-management/)
π **Milestone project:** [Blog Platform β Part 1](/projects/blog/),
[Part 2](/projects/blog-part2/) and [Part 3](/projects/blog-part3/).
## Phase 3 β Modern Angular (weeks 9β12) β‘
Master the APIs that define Angular today. Everything in this phase is **stable** in Angular 22.
**Week 9: Standalone and signals**
- [ ] [Standalone Components](/modern/standalone-components/)
- [ ] [Angular Signals](/modern/signals/)
- [ ] [Computed Signals](/modern/computed-signals/)
**Week 10: Reactive patterns**
- [ ] [Effects API](/modern/effects/)
- [ ] [Linked Signals](/modern/linked-signals/)
- [ ] [Resource API](/modern/resource-api/)
- [ ] [HttpResource API](/modern/http-resource-api/)
**Week 11: Templates and forms**
- [ ] [Control Flow (`@if`, `@for`, `@switch`)](/modern/control-flow/)
- [ ] [New Template Syntax (`@let`)](/modern/template-syntax/)
- [ ] [Signal Forms](/modern/signal-forms/)
**Week 12: Performance foundations**
- [ ] [Zoneless Angular](/modern/zoneless/)
- [ ] [Incremental Hydration](/modern/incremental-hydration/)
π **Milestone project:** the [Admin Dashboard](/projects/dashboard/) β put signals and the modern
APIs to work in a real-world UI.
## Phase 4 β Advanced topics & RxJS (weeks 13β16) ποΈ
Go deeper into Angular's internals and reactive programming.
**Week 13: Building reusable UI**
- [ ] [Custom Directives](/advanced/custom-directives/)
- [ ] [Dynamic Components](/advanced/dynamic-components/)
- [ ] [Content Projection](/advanced/content-projection/)
**Week 14: Architecture**
- [ ] [Advanced DI Patterns](/advanced/dependency-injection/)
- [ ] [Custom Decorators](/advanced/decorators/)
- [ ] [Angular Elements](/advanced/elements/)
- [ ] [Micro Frontends](/advanced/micro-frontends/)
**Week 15: Performance**
- [ ] [Performance Optimization](/advanced/performance/)
- [ ] [Memory Management](/advanced/memory-management/)
- [ ] [Bundle Optimization](/advanced/bundle-optimization/)
**Week 16: RxJS in depth** (read alongside the other weeks if you prefer)
- [ ] [RxJS Fundamentals](/rxjs/fundamentals/) Β· [Observables & Observers](/rxjs/observables/) Β· [Subjects & BehaviorSubject](/rxjs/subjects/)
- [ ] [Transformation](/rxjs/transformation-operators/) Β· [Filtering](/rxjs/filtering-operators/) Β· [Combination](/rxjs/combination-operators/) operators
- [ ] [Error Handling](/rxjs/error-handling/) Β· [Higher-Order Observables](/rxjs/higher-order-observables/) Β· [Schedulers & Testing](/rxjs/schedulers/)
- [ ] [RxJS Patterns in Angular](/rxjs/angular-patterns/)
π **Milestone project:** the [E-commerce Store](/projects/ecommerce/).
## Phase 5 β Testing & quality (weeks 17β18) π§ͺ
New Angular projects use **Vitest** by default. Learn to test everything you've built.
**Week 17: Unit and component tests**
- [ ] [Unit Testing Deep Dive](/testing/unit-testing/)
- [ ] [Component Testing](/testing/component-testing/)
- [ ] [Service Testing](/testing/service-testing/)
- [ ] [Testing Signals](/testing/testing-signals/)
**Week 18: Beyond unit tests**
- [ ] [Mocking & Spies](/testing/mocking/)
- [ ] [Integration Testing](/testing/integration-testing/)
- [ ] [E2E Testing with Playwright](/testing/e2e-testing/)
- [ ] [Code Coverage](/testing/coverage/)
π **Milestone:** add unit, component and E2E tests to one of your projects and run them in CI.
## Phase 6 β SSR, deployment & production (weeks 19β20) π
Make your app fast to load, search-engine friendly and running in production.
**Week 19: Server-side rendering**
- [ ] [SSR Introduction](/ssr/introduction/)
- [ ] [Render Modes](/ssr/render-modes/)
- [ ] [Static Site Generation](/ssr/static-generation/)
- [ ] [Hydration](/ssr/hydration/)
- [ ] [Event Replay](/ssr/event-replay/)
**Week 20: Shipping**
- [ ] [Deployment Strategies](/deployment/strategies/)
- [ ] [Docker & Containers](/deployment/docker/)
- [ ] [CI/CD Pipelines](/deployment/ci-cd/)
π **Final projects:** the real-time [Chat App](/projects/chat-app/) and an installable
[Progressive Web App](/projects/pwa/) β then deploy one of them.
## Bonus tracks (any time) π
**π€ Angular + AI** β make your AI assistant write modern Angular code, and add AI features to
your apps: [Overview](/ai/overview/) Β· [Angular MCP Server](/ai/mcp-server/) Β·
[AI Config, Rules & Skills](/ai/ai-config-and-skills/) Β· [Build AI Features](/ai/build-ai-features/)
**π οΈ Developer tools** β sharpen your workflow:
[Angular CLI](/tools/angular-cli/) Β· [VS Code Setup](/tools/vscode/) Β·
[Angular DevTools](/tools/devtools/) Β· [Debugging](/tools/debugging/) Β· [ESLint](/tools/eslint/) Β·
[Prettier](/tools/prettier/) Β· [Schematics](/tools/schematics/) Β· [Git Hooks](/tools/git-hooks/)
**π Migration** β working on an older codebase?
[Version Upgrades](/migration/version-upgrade/) Β· [Standalone Migration](/migration/standalone/) Β·
[Signals Migration](/migration/signals/) Β· [Modernization](/migration/modernization/)
**π Keep handy** β [Best Practices](/resources/best-practices/) Β·
[Design Patterns](/resources/patterns/) Β· [Cheat Sheet](/resources/cheat-sheet/) Β·
[Performance Checklist](/resources/performance-checklist/) Β·
[Troubleshooting](/resources/troubleshooting/)
## Fast tracks
Short on time? These condensed routes cover the essentials.
| Goal | Route |
| --- | --- |
| **Ship a first real app in 2 weeks** | First App β Components β Templates β Services β Routing β HTTP β Signals β [Todo App](/projects/todo-app/) |
| **Modern Angular refresher (1 week)** | Standalone β Signals β Computed β Linked Signals β Resource API β Control Flow β Signal Forms β Zoneless |
| **Testing crash course (1 week)** | Unit Testing β Component Testing β Service Testing β Mocking β E2E |
| **Performance & SEO (1 week)** | Performance β Bundle Optimization β SSR Introduction β Render Modes β Hydration |
## Planning your study time
| Pace | Hours / week | Full course |
| --- | --- | --- |
| Relaxed | 4β6 | ~6 months |
| Steady (recommended) | 6β10 | ~20 weeks |
| Intensive | 15β20 | ~8β10 weeks |
A simple weekly rhythm that works well:
1. **Read** the week's pages and run every example (2β3 hours).
2. **Practise** β change the examples and try the challenges (2β3 hours).
3. **Build** β add the week's ideas to your current project (2β4 hours).
4. **Review** β write down what you learned and what is still unclear (30 minutes).
## Tips for success
- **Build while you learn.** Reading alone won't make it stick.
- **Use the type checker.** Angular's strict templates show many mistakes before you even run the app.
- **Inspect with Angular DevTools** to see your component tree and signal values live.
- **Read the error message.** Angular errors include a code (like `NG0950`) you can search for.
- **Join the community** β see [Community](/resources/community/) and
[Further Reading](/resources/further-reading/).
## Key takeaways
- The guide is organised in six phases: foundations β intermediate β modern Angular β advanced &
RxJS β testing β SSR & deployment, with projects after each phase.
- Start where your experience fits β you don't have to read everything in order.
- The bonus tracks (AI, tools, migration, resources) can be used at any time.
## Next steps
Ready? Start with [What is Angular?](/beginner/what-is-angular/), or if you already know the basics,
jump straight into [Your First App](/beginner/first-app/). π
---
# What is Angular? π °οΈ
> What Angular is, what it includes, how it works, how it compares to React and Vue, its release cycle and when to choose it β explained for beginners.
Source: https://ng-guide.letsprogram.in/beginner/what-is-angular/
Angular is a free, open-source **web framework** for building fast, reliable web applications. It is
written in TypeScript and maintained by a dedicated team at Google, together with a large open-source
community. You can use it for anything from a small personal project to apps with hundreds of
screens and developers.
## What you'll learn
- What Angular is and what it includes "in the box"
- What Angular code looks like
- How an Angular app works at a high level
- How Angular compares to React and Vue
- How Angular versions and support work
- When Angular is (and isn't) a good fit
## Angular in simple terms
Think of Angular as a **complete workshop** rather than a single tool. Some libraries give you only
a hammer (for example, a way to render UI) and you pick the rest yourself. Angular gives you a
well-organised workshop where every tool is designed to work with the others:
| Tool in the workshop | What it does |
| --- | --- |
| **Components** | Reusable pieces of UI (a header, a product card, a whole page) |
| **Templates** | HTML with extra syntax to show data, react to events and loop over lists |
| **Signals** | Reactive values β when one changes, Angular updates exactly what depends on it |
| **Services & dependency injection** | Share logic and data (API calls, a shopping cart) across components |
| **Router** | Navigate between pages, lazy-load code, protect routes with guards |
| **Forms** | Collect and validate user input (Signal Forms, Reactive Forms, template-driven) |
| **HttpClient / `httpResource`** | Talk to backend APIs |
| **Angular CLI** | Create, run, test, build and update projects with one command |
| **SSR & hydration** | Render pages on the server for faster loads and better SEO |
| **Testing tools** | `TestBed`, component harnesses, Vitest integration |
## A first look at Angular code
Here is a small but complete component. It shows a counter and a button:
```ts title="counter.ts"
import { Component, computed, signal } from '@angular/core';
@Component({
selector: 'app-counter',
template: `
You clicked {{ count() }} times (double: {{ double() }})
`,
styles: `
button {
padding: 0.5rem 1rem;
}
`,
})
export class Counter {
protected readonly count = signal(0);
protected readonly double = computed(() => this.count() * 2);
protected increment() {
this.count.update((value) => value + 1);
}
}
```
Reading it line by line:
- `@Component({...})` tells Angular "this class is a component".
- `selector: 'app-counter'` means you use it in HTML as ``.
- `template` is the HTML. `{{ count() }}` shows a value; `(click)="increment()"` listens to an event.
- `styles` are scoped to this component β they won't leak to the rest of the page.
- `signal(0)` creates a reactive value; `computed()` derives a new value from it.
- Calling `count.update(...)` changes the value, and Angular re-renders only what reads it.
Components can use **services** to share logic. Angular hands them a service through
**dependency injection** with `inject()`:
```ts title="greeting.ts"
import { Component, Service, inject, input } from '@angular/core';
@Service()
export class Greeter {
greet(name: string) {
return `Hello, ${name}! π`;
}
}
@Component({
selector: 'app-greeting',
template: `
{{ greeter.greet(name()) }}
`,
})
export class Greeting {
readonly name = input('Angular');
protected readonly greeter = inject(Greeter);
}
```
`` renders "Hello, Sam! π". You'll learn all of this step by step in the
next pages.
## How an Angular app works
```text
index.html βββΊ The browser loads one HTML page
β
main.ts βββΊ bootstrapApplication(App, appConfig)
β
App (root component)
βββ Header
βββ βββΊ ProductList page (chosen by the router)
β βββ ProductCard
β βββ ProductCard
βββ Footer
β²
Services (CartStore, ProductApi, β¦) are injected wherever they're needed
```
1. **One page, many views.** An Angular app is usually a **single-page application (SPA)**: the
browser loads `index.html` once, and Angular swaps views as you navigate β no full page reloads.
2. **A tree of components.** The root component (`App`) contains other components, which contain
others, and so on.
3. **Compiled ahead of time.** The Angular compiler turns your templates into efficient JavaScript
at build time, and type-checks them, so many mistakes are caught before the app runs.
4. **Reactive updates.** When a signal changes, an event fires, or an input changes, Angular updates
only the affected components. Since Angular 21, new apps don't need `zone.js` for this
("zoneless").
5. **Optional server rendering.** With SSR, the first HTML is rendered on the server, then
**hydrated** in the browser so it becomes interactive.
## Why choose Angular?
**1. Batteries included.** Routing, forms, HTTP, testing, SSR, animations, i18n and accessibility
primitives are all official and designed together. You spend less time choosing and wiring up
libraries.
**2. TypeScript and strict type checking.** Your components, services **and templates** are
type-checked. Typos like `{{ user.nmae }}` fail the build instead of failing in production.
**3. Modern, fine-grained reactivity.** Signals, `computed()`, `linkedSignal()`, `resource()`
and `httpResource()` make state easy to reason about. Components use `OnPush` change detection
by default (since v22), so Angular skips work it doesn't need to do.
**4. Great tooling.**
- The **Angular CLI** creates projects, generates code and builds with esbuild and Vite.
- **`ng update`** upgrades your app and runs automatic code migrations for breaking changes.
- The **Angular Language Service** brings autocomplete and errors into templates in your editor.
- **Angular DevTools** lets you inspect components, signals, injectors and performance.
- The **Angular CLI MCP server** gives AI assistants accurate, up-to-date Angular knowledge.
**5. Stability you can plan around.** Angular follows semantic versioning, publishes a release
schedule, deprecates APIs before removing them, and gives every major version long-term support.
**6. Secure by default.** Angular automatically sanitises values you bind into the DOM to help
prevent cross-site scripting (XSS), and supports Trusted Types.
**7. Scales with your team.** A consistent project structure, a shared style guide and dependency
injection make large codebases easier to navigate.
## Angular vs React vs Vue
All three are excellent choices. They differ mainly in **how much they decide for you**.
| | Angular | React | Vue |
| --- | --- | --- | --- |
| **Type** | Full framework | UI library | Progressive framework |
| **Language** | TypeScript (built-in) | JavaScript or TypeScript | JavaScript or TypeScript |
| **Templates** | HTML templates with `@if` / `@for` | JSX | HTML templates (or JSX) |
| **Reactivity** | Signals | Hooks (`useState`, β¦) | Refs / reactive proxies |
| **Routing, forms, HTTP** | Official, built in | Third-party libraries | Official router and state library; others third-party |
| **Dependency injection** | Built in, hierarchical | No (uses context) | `provide` / `inject` |
| **CLI & build** | Angular CLI (esbuild + Vite) | Vite, Next.js, etc. | Vite, Nuxt, etc. |
| **Opinionated?** | Yes β one recommended way | No β you choose | Somewhat |
**In short:** if you want one consistent, well-integrated toolkit with strong typing, Angular is a
great fit. If you prefer to assemble your own stack piece by piece, React may suit you. Vue sits in
between.
> **Angular is not AngularJS**
>
> **AngularJS** (version 1.x, first released in 2010) is a different, older framework. Its long-term
> support ended on December 31, 2021. "Angular" (version 2 and later, first released in 2016) is a
> complete rewrite. Tutorials that mention `$scope` or `ng-controller` are about AngularJS.
## Versions and support
Angular uses **semantic versioning**: `major.minor.patch` (for example `22.2.4`).
- **Major** versions (22, 23, β¦) can contain breaking changes β `ng update` migrates most of them
for you.
- **Minor** versions add features and are backward-compatible.
- **Patch** versions fix bugs and are released almost every week.
Starting with **Angular 22**, a new major version is planned **every 12 months** (before v22 it was
every 6 months), with 4β6 minor releases in between. Each major version is supported for about
**24 months**: 12 months of active support, then 12 months of long-term support (LTS) with critical
and security fixes only.
| Version | Status (Nov 2026) | Released | Active support ends | LTS ends |
| --- | --- | --- | --- | --- |
| **22** | Active | 2026-06-03 | ~2027-06 | ~2028-06 |
| 21 | LTS | 2025-11-19 | 2026-06-03 | ~2027-06 |
| 20 | LTS | 2025-05-28 | 2025-11-19 | 2026-11-28 |
Versions 2 to 19 are no longer supported. Check your project's version with `ng version`.
### How Angular got here
| Version | Highlights |
| --- | --- |
| 2 (2016) | The new Angular: TypeScript, components, dependency injection |
| 14β15 | Standalone components (no `NgModule` needed); typed reactive forms |
| 16 | Signals introduced; required inputs |
| 17 | New look and [angular.dev](https://angular.dev); built-in control flow (`@if`, `@for`) and `@defer`; esbuild/Vite build system by default |
| 18 | Control flow and `@defer` stable; experimental zoneless; `@let` (18.1) |
| 19 | Standalone is the default; `linkedSignal` and `resource` introduced; incremental hydration preview |
| 20 | `effect`, `linkedSignal`, `toSignal` and incremental hydration stable; zoneless stable (20.2); new short file names (`app.ts`) |
| 21 | Zoneless by default; Vitest by default; Signal Forms (experimental) and Angular Aria (preview); CLI MCP server |
| **22** | `OnPush` by default; `@Service()`; `injectAsync()`; **Signal Forms**, `resource`/`httpResource` and **Angular Aria** stable; fetch-based `HttpClient` by default; TypeScript 6 |
## The Angular ecosystem
| Project | What it's for |
| --- | --- |
| **Angular Material** (`@angular/material`) | Ready-made Material Design components |
| **Angular CDK** (`@angular/cdk`) | Behaviour primitives: overlays, drag & drop, virtual scrolling, a11y |
| **Angular Aria** (`@angular/aria`) | Headless, accessible patterns (tabs, menu, combobox, listbox, treeβ¦) that you style yourself |
| **`@angular/ssr`** | Server-side rendering, prerendering and hydration |
| **`@angular/service-worker`** | Offline support and PWAs |
| **NgRx** (community) | State management, including the signal-based `@ngrx/signals` store |
| **angular-eslint** (community) | Linting rules for Angular code and templates |
| **Ionic + Capacitor**, **NativeScript** (community) | Mobile apps using Angular |
## When to use Angular
### β A great fit for
- Medium to large applications with many screens: dashboards, admin panels, internal tools,
e-commerce, banking and SaaS products
- Teams that value consistency, strong typing and clear conventions
- Long-lived projects that need predictable upgrades
- Apps that need SSR, i18n, accessibility and testing without assembling many libraries
### π€ Maybe something else
- A mostly static site or blog with little interactivity β a static site generator may be simpler
(although Angular's prerendering handles this too)
- A tiny widget on an existing page β plain JavaScript or web components may be enough
## Who uses Angular?
Angular is used inside Google for large products such as **Google Cloud Console** and
**Google Fonts**, and by many companies worldwide for enterprise software, finance, healthcare,
e-commerce and government services.
## A typical development workflow
1. **Create** a project: `ng new my-app`
2. **Generate** building blocks: `ng generate component product-card`
3. **Develop** with live reload: `ng serve`
4. **Test**: `ng test` (Vitest)
5. **Build** for production: `ng build`
6. **Deploy** the `dist/` folder (or a Node.js server for SSR)
7. **Update** to the next version: `ng update @angular/core @angular/cli`
## Common misconceptions
- **"Angular needs NgModules."** Not any more β standalone components are the default.
- **"Angular is slow / heavy."** Modern Angular is zoneless, uses `OnPush` by default, and only
ships the code you use (tree-shaking, lazy loading, `@defer`).
- **"Angular is hard to learn."** There is more built in, so there is more to discover β but you only
need components, templates, signals and services to build your first app.
- **"Angular is the same as AngularJS."** No β see the note above.
## Key takeaways
- Angular is a complete, TypeScript-first framework for building web apps, maintained by Google.
- Apps are trees of **components**; **signals** drive updates; **services** share logic via
**dependency injection**.
- Angular 22 is the current version: standalone, zoneless, `OnPush` by default, with stable Signal
Forms and resource APIs.
- New majors arrive every 12 months, and each is supported for about 24 months.
## Next steps
1. **[Angular Architecture](/beginner/architecture/)** β see how the pieces fit together
2. **[Your First App](/beginner/first-app/)** β build a working task manager
3. **[Components Basics](/beginner/components/)** β dive into components
---
# Angular Architecture ποΈ
> How an Angular 22 app fits together β components, templates, services, dependency injection, the router, signals, change detection and bootstrapping.
Source: https://ng-guide.letsprogram.in/beginner/architecture/
Before writing lots of code, it helps to see the big picture: which pieces an Angular app is made
of, how they talk to each other, and what happens when the app starts. This page gives you that
mental map, with one small feature built from every piece.
## What you'll learn
- The building blocks of an Angular app and what each one is for
- How data flows between components (inputs down, outputs up, services across)
- How dependency injection provides services to components
- How Angular decides when to update the screen in Angular 22
- What happens, step by step, when your app starts
## The big picture
```text
βββββββββββββββββββββββββββββ Application ββββββββββββββββββββββββββββββ
β main.ts ββΊ bootstrapApplication(App, appConfig) β
β β
β appConfig.providers ββΊ router, HttpClient, error listeners, β¦ β
β β
β App (root component) β
β βββ