Skip to main content

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 — 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
node -v
npm Manages packages (bundled with Node) npm -v
Git (optional) Version control for your projects https://git-scm.com
git --version

Pro Tip: Switch versions easily with nvm:

nvm install --lts
nvm use --lts

Angular 20 supports modern evergreen browsers — check details at 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:

npm install -g @angular/cli@20

Windows? Run as Administrator.
macOS/Linux? Add sudo if prompted:

sudo npm install -g @angular/cli@20

Verify:

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:

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:

cd my-blog-app

Launch the dev server:

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:

export class AppComponent {
  title = 'My Awesome Blog';  // Updated title
}

2. Update the Template

Open src/app/app.html and find (around line 20):

<h1>Hello, {{ title }}</h1>

Change to:

<h1>Welcome to {{ title }}! 🚀</h1>

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 <app-root></app-root> — Angular's mount point.
  2. main.ts bootstraps: 
    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 <name> n Scaffold a new app
ng serve dev Dev server with HMR
ng build b Production build
ng generate component <name> g c New component (suffix-free!)
ng test t Run tests
ng update - Upgrade to latest

Docs: angular.dev/cli

Generate with legacy suffixes: ng g c my-comp --suffix=component.

1. VS Code + Extensions

2. Angular DevTools (Chrome/Firefox)

Profile components, inspect signals: angular.dev/tools/devtools. v20 adds OnPush badges!

3. Communities

What’s Next?

Your app's running — level up:

ng g c blog-post  # Creates blog-post.ts/html/css (no suffixes)

Add to app.html:

<app-blog-post></app-blog-post>

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 — practical, dev-focused.
Based on Angular 20 docs and Learning Angular.

No comments to display

Back to top