# Part 1: Building Your First Angular 20 Application Web development has exploded in the last decade. Frameworks like **Angular** lead the charge, emphasizing **performance**, **developer ergonomics**, and **modern web standards**. Angular 20, released in May 2025, takes this further with stabilized signals, zoneless change detection (in developer preview), and a streamlined naming convention that drops those pesky suffixes like `.component.ts` by default. In this guide, we'll set up your first Angular 20 app using the **Angular CLI**. Expect cleaner file names, faster reactivity, and less boilerplate. We'll keep it practical, step-by-step, and inspired by [Flavio Copes](https://flaviocopes.com) — code-first, no fluff. --- ## Requirements Ensure your setup includes these essentials for a smooth Angular 20 workflow: | Tool | Why You Need It | Install / Check | |------|------------------|------------------| | **Node.js** (LTS, e.g., 20.x or later) | Powers the CLI and runs TypeScript | [https://nodejs.org](https://nodejs.org)
`node -v` | | **npm** | Manages packages (bundled with Node) | `npm -v` | | **Git** (optional) | Version control for your projects | [https://git-scm.com](https://git-scm.com)
`git --version` | > **Pro Tip**: Switch versions easily with [`nvm`](https://github.com/nvm-sh/nvm): > ```bash > nvm install --lts > nvm use --lts > ``` > Angular 20 supports modern evergreen browsers — check details at [angular.dev/reference/versions#browser-support](https://angular.dev/reference/versions#browser-support). --- ## Install the Angular CLI The **Angular CLI** is your go-to tool for scaffolding, testing, and deploying. It now aligns with Angular 20's new style guide, generating suffix-free files by default (e.g., `app.ts` instead of `app.component.ts`). Install globally: ```bash npm install -g @angular/cli@20 ``` > Windows? Run as **Administrator**. > macOS/Linux? Add `sudo` if prompted: > ```bash > sudo npm install -g @angular/cli@20 > ``` Verify: ```bash ng version ``` Output should show **Angular CLI 20.x.x** and related tools. --- ## Create Your First Angular 20 App Generate a new project named `my-blog-app`: ```bash ng new my-blog-app ``` Prompts you'll see: ``` ? Would you like to share pseudonymous usage data...? (y/N) → N ? Which stylesheet format would you like to use? → CSS ? Do you want to enable Server-Side Rendering (SSR)...? (y/N) → N ``` Hit **Enter** for defaults (SSR is optional; we'll skip for simplicity). The CLI will: - Create `my-blog-app/` folder - Install dependencies (including Angular 20 core) - Apply the new naming: No `.component` suffixes! This takes 1–3 minutes. Pro tip: Angular 20's CLI is faster thanks to optimized builds. > **Legacy Mode?** If you prefer old-school suffixes, add `--strict=false` or configure in `angular.json` later. --- ## Run the App Enter the project: ```bash cd my-blog-app ``` Launch the dev server: ```bash ng serve ``` > Alias: `ng dev` for quick starts. After building (faster in v20!), open: **http://localhost:4200** Boom — the Angular welcome page loads! Live reload is on: Edit code, save, and watch updates instantly. --- ## Project Structure (Updated for Angular 20) Angular 20 keeps things lean. Key folders/files: ``` my-blog-app/ ├── src/ ← Your source code hub │ ├── app/ │ │ ├── app.ts ← Main component (no .component.ts!) │ │ ├── app.html ← Template (no .component.html) │ │ ├── app.css ← Styles (no .component.css) │ │ ├── app.config.ts ← App providers │ │ └── app.routes.ts ← Routing config │ ├── index.html ← Entry HTML │ ├── main.ts ← Bootstrap │ └── styles.css ← Global CSS ├── angular.json ← Workspace config ├── package.json ← Dependencies └── tsconfig.json ← TypeScript setup ``` > Focus on `src/app/` — that's your playground. New naming reduces clutter: `app.ts` handles logic, `app.html` the markup. --- ## Make Your First Change Tweak the welcome message to feel the reactivity. ### 1. Edit the Main Component Open `src/app/app.ts`: ```ts export class AppComponent { title = 'My Awesome Blog'; // Updated title } ``` ### 2. Update the Template Open `src/app/app.html` and find (around line 20): ```html

Hello, {{ title }}

``` Change to: ```html

Welcome to {{ title }}! 🚀

``` Save. Browser auto-refreshes — see **"Welcome to My Awesome Blog! 🚀"**? This uses **interpolation** (`{{ }}`) for data binding. Angular 20's signals make this even snappier under the hood. --- ## How It Works (Quick Peek Under the Hood) 1. `index.html` has `` — Angular's mount point. 2. `main.ts` bootstraps: ```ts bootstrapApplication(AppComponent, appConfig); ``` 3. `app.ts` (root component) renders into the DOM. 4. Signals (stable in v20) handle reactivity efficiently — no more full tree diffs by default. --- ## Useful Angular CLI Commands | Command | Alias | What It Does | |---------|-------|--------------| | `ng new ` | `n` | Scaffold a new app | | `ng serve` | `dev` | Dev server with HMR | | `ng build` | `b` | Production build | | `ng generate component ` | `g c` | New component (suffix-free!) | | `ng test` | `t` | Run tests | | `ng update` | - | Upgrade to latest | Docs: [angular.dev/cli](https://angular.dev/cli) > Generate with legacy suffixes: `ng g c my-comp --suffix=component`. --- ## Recommended Tools ### 1. **VS Code** + Extensions - [Angular Language Service](https://marketplace.visualstudio.com/items?itemName=angular.ng-template) — Auto-complete in templates. - [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme) — Spot Angular files easily. ### 2. **Angular DevTools** (Chrome/Firefox) Profile components, inspect signals: [angular.dev/tools/devtools](https://angular.dev/tools/devtools). v20 adds OnPush badges! ### 3. **Communities** - [Tech Stack Nation](https://techstacknation.com) — Beginner-friendly study group. - [Angular Discord](https://discord.gg/angular) — Official hub. --- ## What’s Next? Your app's running — level up: ```bash ng g c blog-post # Creates blog-post.ts/html/css (no suffixes) ``` Add to `app.html`: ```html ``` Explore signals for state: `signal('Hello')`. Dive into routing or SSR next. > Angular 20's zoneless preview? Opt-in for blazing-fast apps. --- ## Final Words You've built an Angular 20 app: Cleaner names, stable signals, and CLI magic. It's not just a framework — it's a full ecosystem for scalable web apps. Build iteratively. Experiment. The future's reactive. --- *Inspired by [Flavio Copes](https://flaviocopes.com) — practical, dev-focused.* *Based on Angular 20 docs and [Learning Angular](https://github.com/PacktPublishing/Learning-Angular-Fifth-Edition).*