The short version

provideRouter(routes, withComponentInputBinding({ queryParams: false }))

That’s it. Query params no longer bind to your component inputs. Path params and route data? Still work fine.

So what was the problem?

Let me show you. Say you have this:

// Route: { path: 'user/:id', component: UserComponent, data: { role: 'admin' } }
// URL: /user/42?tab=settings

@Component({ ... })
export class UserComponent {
  id = input<string>();       // ← from :id
  tab = input<string>();      // ← from ?tab=
  role = input<string>();     // ← from route data
}

All three sources — path params, query params, route data — bind to your inputs automatically. Sounds great until you realize that query params are completely user-controlled. Anyone can type whatever they want in the URL bar.

Picture this:

Read more

Before you start diving into this new topic you can review the full guide of resource() that was introduced in Angular 19.

TL;DR

Angular added a debounced() function that takes a signal and a wait time, and returns a Resource:

signal → debounced(signal, 500) → Resource<T>

The resource’s value() holds the debounced value. Its status tells you whether the value is settled ('resolved'), still waiting ('loading'), or if the source threw ('error'). No RxJS, no setTimeout wrappers, no custom hooks. Just signals in, Resource out.

The Problem

You have a search input. The user types “Tokyo”. Without debouncing, you fire 5 HTTP requests: one per keystroke. That’s wasteful, potentially slow, and can cause race conditions if responses arrive out of order.

The RxJS way:

searchControl.valueChanges.pipe(
  debounceTime(500),
  distinctUntilChanged(),
  switchMap(query => this.http.get(`/api/search?q=${query}`))
).subscribe(results => { ... });

The manual way:

let timer: ReturnType<typeof setTimeout>;
function onInput(value: string) {
  clearTimeout(timer);
  timer = setTimeout(() => {
    // now do something with value
  }, 500);
}

Both work. Neither integrates with signals. You end up bridging between observables or callbacks and signals, losing reactivity along the way.

The real gap: there was no signal-native way to debounce a value and get a reactive, composable result back.

The Solution: debounced()

The API

import { debounced } from '@angular/core';

const search = signal('');
const debouncedSearch = debounced(() => search(), 500);

debouncedSearch is a Resource<string>. It has everything you’d expect:

• debouncedSearch.value() — the debounced value (updates only after 500ms of silence)

• debouncedSearch.status() — 'resolved' when settled, 'loading' while waiting, 'error' if the source threw

• debouncedSearch.isLoading() — true while a value is pending

• debouncedSearch.error() — the error, if the source signal threw

Full Signature

Read more

Before you start diving into this new topic you can review the full guide of resource() that was introduced in Angular 19.

TL;DR

Angular added three things that let you take a resource, modify its behavior, and get back a real resource.

Resource  →  .snapshot  →  transform it  →  resourceFromSnapshots()  →  Resource

The killer use case? Keep showing old data while new data loads — no more blank screens when switching between items. And it’s a generic utility you write once and reuse everywhere.

PR: feat(core): resource composition via snapshots
Authors: Alex Rickabaugh & Jessica Janiuk
Status: Experimental · Angular 21.2+

Code Repository Example in this article can be found here.

The Problem (in Plain English)

Imagine you have a weather app. The user is looking at London’s weather. They click “Tokyo.” What happens?

Before this PR:

1. The resource enters “loading” state

2. value() immediately becomes undefined

3. The weather card disappears — blank screen, skeleton loader

4. Tokyo’s data arrives, card re-appears

That flash of empty content feels broken. Users hate it.

You might think: “I’ll just keep the old value around in a separate signal.” Sure, but then you lose the Resource interface. Your workaround doesn’t have .isLoading(), .hasValue(), .status(). It’s a one-off hack that doesn’t compose.

The real problem: there was no way to take a Resource, tweak its behavior, and get back something that’s still a Resource.

Read more

The Problem Nobody Talks About

Every time Angular introduces a new API, the community gets excited about greenfield projects. “Look how clean this is!” And it is clean. Signal forms are a genuine improvement over reactive forms — less boilerplate, better type safety, signals instead of observables.

But here’s the thing: most of us aren’t building new apps from scratch. We’re maintaining applications with dozens — sometimes hundreds — of reactive forms. Forms that work. Forms that are tested. Forms that have edge cases baked into them over years of production use.

The question isn’t “are signal forms better?” — they are. The question is: how do you get there without rewriting everything?

Angular 21.2 answers this with two interop tools:

1. SignalFormControl — A signal-based control that extends AbstractControl, so it plugs directly into existing FormGroup and FormArray structures

2. compatForm — A version of form() that accepts reactive FormControl instances as part of the data model

Both are exported from @angular/forms/signals/compat. Both are experimental. And both solve different migration scenarios.

Understanding the Two Migration Paths

Before diving into code, it’s worth understanding when to use each approach.

SignalFormControl is for when you want to migrate individual fields inside an existing reactive form. You replace one FormControl with a SignalFormControl, and the parent FormGroup doesn’t even notice — it just sees an AbstractControl.

compatForm is for when you want to migrate the form itself to signal forms, but some fields are still FormControl instances that you’re not ready to convert yet.

Think of it this way:

• I want to add signal validation to one field in my reactive form → SignalFormControlReactive form → signal field

• I want to use form() but keep some existing FormControls → compatFormSignal form → reactive fields

Most teams will start with SignalFormControl because it’s the least disruptive. You change one field, ship it, observe, then do the next one.

SignalFormControl: Your First Migration Step

What It Is

SignalFormControl extends AbstractControl — the same base class that FormControl, FormGroup, and FormArray extend. This means it’s a drop-in replacement anywhere Angular’s reactive forms infrastructure expects a control.

Internally, it’s backed by a WritableSignal<T> and a signal forms FieldTree. It translates between the two worlds: when the reactive form reads .value, it gets the signal’s current value. When signal forms validation runs, the results are exposed through the reactive .errors getter.

import { SignalFormControl } from '@angular/forms/signals/compat';

Read more

1. @angular/animations

2. @angular/build

a) Headless Option for Unit-Test Builder - PR

The unit-test builder now supports a headless option for browser-based tests. You can toggle between headless and headed mode without modifying your Vitest configuration.

ng test --headless=false  # Run with visible browser for debugging
ng test                   # Default: headless

b) Vitest Browser with Playwright OS Theme - PR

When running Vitest browser tests with Playwright, the browser now respects your operating system’s theme (light/dark mode). This means your tests run in an environment that matches your system preferences, which can be relevant for testing theme-dependent UI behavior.

3. @angular/common

a) Outlet Injector Option for ngTemplateOutlet - PR

To understand this feature, you first need to understand a quirk of how ngTemplateOutlet works with Angular’s dependency injection.

The problem: templates resolve services from where they’re defined, not where they’re rendered.

Imagine you define an <ng-template> at the root of your component. Inside that template, you try to inject() a service. Angular will look for that service starting from the definition site of the template (where the <ng-template> tag lives in the source code), not from where the template is actually stamped into the DOM via *ngTemplateOutlet.

Here’s a concrete example to make this tangible:

Read more

1. @angular/common

a) Custom Transformations for Cloudflare and Cloudinary Image Loaders - PR

Adds support for custom transformations to Cloudinary and Cloudflare image loaders via a transform parameter.

You can learn more about How to Configure an image loader for NgOptimizedImage.

b) Custom Transformations for ImageKit and Imgix Loaders - PR

Similar custom transformation support extends to ImageKit and Imgix, two other popular image CDN providers.

You can learn more about How to Configure an image loader for NgOptimizedImage.

Read more

Here’s what makes this interesting: the form doesn’t just validate that you typed something. It calls an API to verify the city exists in a weather database, manages the loading state while checking, caches results so you don’t hammer the server, and gives instant feedback. That’s where metadata becomes essential.

The Core Problem

Traditional validation answers simple questions: Is the field empty? Does it match this pattern? But modern forms need smarter behavior. When someone types “Barcelona, Spain,” you want to know:

• Does this city exist in your weather database?

• Are we currently checking with the server?

• Did we already validate this exact combination?

• Should we show a spinner?

Your form data is just { city: “Barcelona”, country: “Spain” }. Everything else—the validation state, the API response, the loading indicators—that’s metadata. It’s the difference between what the user entered and what you need to know about what they entered.

Starting With Basic Validation

Let’s look at the foundation. This is pure validation, no async behavior yet:

const cityNameSchema = schema<string>((path) => {
  required(path, { message: ‘City is required’ });
  minLength(path, 2, { message: ‘City must be at least 2 characters’ });
  maxLength(path, 50, { message: ‘City name is too long’ });
});

export const locationSchema = schema<WeatherLocation>((path) => {
  apply(path.city, cityNameSchema);
  apply(path.country, countryNameSchema);
});

This checks structure and format. But it doesn’t verify if Barcelona is real or if someone made it up. For that, you need to talk to an API.

Adding Real Validation

Here’s where it gets interesting. We’re going to validate cities against a weather API as the user types:

Read more

If you’ve been experimenting with the new Signal Forms in Angular 21, you might have noticed something missing. You set up your schemas, you wired up your signals, but when you looked at the DOM... it was clean.

Too clean.

In the old ReactiveForms world, Angular automatically slapped classes like .ng-invalid, .ng-dirty, and .ng-touched onto your inputs. CSS frameworks (like Bootstrap or Material) relied on these hooks to turn borders red or show error icons. With Signal Forms, that automatic behavior was gone—until now.

With the latest merge into core (Commit 7d5c7cf), Angular 21.1 introduces provideSignalFormsConfig. This acts as a bridge between your pure logic signal state and your UI styling.

Let’s look at how this changes the game for our Weather Chatbot, specifically how we can use it to drive a “Tailwind-native” form experience without cluttering our templates.

The “Lazy” Way: Back to Basics

If you just want the old behavior back because you have existing CSS that targets .ng-invalid, the Angular team provided a pre-baked constant.

In your app.config.ts:

import { ApplicationConfig } from ‘@angular/core’;
import { provideSignalFormsConfig } from ‘@angular/forms/signals’;
import { NG_STATUS_CLASSES } from ‘@angular/forms/signals/compat’;

export const appConfig: ApplicationConfig = {
  providers: [
    // 🪄 Magic: Automatically adds ng-valid, ng-invalid, ng-dirty, etc.
    provideSignalFormsConfig({
      classes: NG_STATUS_CLASSES
    })
  ]
};

But we are writing modern Angular. We can do better than legacy compatibility.

The “Pro” Way: Semantic Configuration

This new API allows us to map any CSS class to a predicate function that reads the field state. This is incredibly powerful.

Read more

1. @angular/animations

2. @angular/common

a) Zero-Configuration HTTP Services - PR

HTTP services are now automatically provided in the root injector, eliminating the need for explicit provideHttpClient().

import { bootstrapApplication } from '@angular/platform-browser';
import { provideHttpClient } from '@angular/common/http';

// Before
bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient() // ❌ Required for basic HTTP functionality
  ]
});

// After
bootstrapApplication(AppComponent, {
  providers: [
    // ✅ HTTP services automatically available
  ]
});

Advanced Configuration: For custom interceptors, client configuration, or specific features, continue using provideHttpClient():

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(
      withInterceptors([authInterceptor]),
      withFetch() // Custom features require explicit provider
    )
  ]
});

b) ⚠️ NgComponentOutlet NgModuleFactory Removal - PR

The ngModuleFactory input of NgComponentOutlet was a legacy feature that relied on the deprecated NgModuleFactory class, creating unnecessary complexity and maintenance overhead.

Now ngModuleFactory input from NgComponentOutlet is removed, using only the modern NgModule approach.

Read more

The Problem We’ve All Been Ignoring

Here’s something embarrassing: I had a search field in one of my apps that was hitting our ElasticSearch cluster on every single keystroke. A user typing “San Francisco” would trigger 13 API calls. Multiply that by a few hundred concurrent users, and our AWS bill was... let’s just say “uncomfortable.”

The old solution? RxJS operators like debounceTime() scattered throughout components, manual subscription management, and crossing your fingers that you didn’t create a memory leak. It worked, but it felt like duct tape on a leaky pipe.

Signal Forms’ new debounce() rule takes a completely different approach. Instead of managing debouncing at the component level, it’s built directly into the form’s schema definition. The form itself knows when to synchronize user input with your data model.

Read more

But here’s where we’re going to do something different from typical tutorials. Instead of building a generic weather API or todo list MCP server, we’re creating something immediately valuable for Angular developers: an MCP server with a powerful refactoring tool that enforces modern Angular and TypeScript best practices.

Read more

The Birth of a New Standard: How MCP Came to Be

Large Language Models (LLMs) like ChatGPT, Claude, and Gemini can write code, debug complex problems, and explain technical concepts with remarkable fluency. Yet despite their brilliance, they’ve been operating in isolation—powerful minds trapped in a room with no doors or windows.

Picture this: you have an AI assistant that can write flawless TypeScript, suggest perfect Angular component architectures, and identify bugs in milliseconds. But it can’t see your actual project files, can’t access your database, can’t read your API documentation, and has no idea what tools you’re using. It’s like hiring a world-class architect who has to design your house without ever seeing the plot of land, checking local building codes, or knowing what materials are available.

This has been the fundamental limitation of AI development tools—until now.

The Genesis: Anthropic’s Vision

In November 2024, Anthropic—the AI safety company founded by former OpenAI researchers and creators of Claude—unveiled something that would change the landscape of AI integration: the Model Context Protocol (MCP).

The team at Anthropic had been grappling with a persistent problem. As they worked on making Claude more useful for real-world tasks, they kept running into the same wall: every time they wanted to connect Claude to a new tool, service, or data source, they had to build a custom integration from scratch. Database access required one approach. File system operations needed another. API integrations each demanded unique implementations.

It was the API chaos problem we explored earlier, but at a massive scale.

The Open Standard Revolution

Rather than building yet another proprietary solution, Anthropic made a bold decision: they would create an open, universal protocol that any AI system could use to connect with any tool or service. On November 25, 2024, they released MCP as an open-source specification, complete with SDKs in Python and TypeScript.

The core idea was elegant: instead of building point-to-point integrations between every AI model and every service, create a standardized “language” that both sides could speak. Think of it as establishing USB-C for AI connectivity—one protocol to rule them all.

What made MCP truly revolutionary wasn’t just the technical specification. It was the philosophy behind it:

• Open and Free: Anyone could implement it, no licensing fees, no vendor lock-in

• Bidirectional: Both AI systems and services could initiate communication

• Secure by Design: Built-in authorization and sandboxing capabilities

• Simple Yet Powerful: Easy enough for individual developers to implement, robust enough for enterprise systems

The Unprecedented Adoption

Here’s where the story gets really interesting. In the tech world, standards battles typically drag on for years. Companies fight over competing specifications, each pushing their own solution. But something different happened with MCP.

By March 2025, just four months after its introduction, OpenAI—Anthropic’s biggest competitor—announced they were adopting MCP for GPT integrations. Let that sink in: a company competing directly with Anthropic chose to embrace their open standard rather than build their own.

April 2025 brought another bombshell: Google DeepMind integrated MCP support into their AI offerings. Microsoft followed in May 2025, incorporating MCP into Azure AI services and announcing plans to support it across their development tools ecosystem.

When fierce competitors this quickly agree on a standard, you’re witnessing something rare in tech history. It’s reminiscent of how HTTP became the universal protocol for the web, or how REST APIs became the de facto standard for web services.

From Concept to Ecosystem

Today, less than a year after its introduction, MCP has evolved from a novel idea into a thriving ecosystem. Development tools like Cursor, Windsurf, and Zed have built-in MCP support. Major SaaS companies are releasing official MCP servers. The community has created hundreds of integrations.

What started as Anthropic’s solution to their own integration challenges has become the foundation for how AI systems interact with the digital world.

And that’s exactly what we’re going to explore in this article: understanding the principles behind MCP and learning how to build our own MCP server using Angular, joining this revolution in AI integration.

The Fundamental Problem: AI That Can Only "Talk"

When you ask ChatGPT to "plan me a week-long holiday in Costa Rica," it can tell you exactly what to do, suggest amazing destinations, even help you create detailed itineraries—but it cannot actually open a browser, navigate to travel sites, check real-time availability, or complete bookings. LLMs are fundamentally text generators, not action-takers. This is essentially the limitation that Large Language Models (LLMs) like GPT face today.

Enter AI Agents: The Hands and Feet of AI

This is where AI agents come into play. Think of an AI agent as an intelligent assistant that combines the reasoning power of an LLM with the ability actually to do things. It's like giving that brilliant person in the room a set of tools, internet access, and the ability to interact with the outside world.

An AI agent follows a simple but powerful pattern:

1. Receive a request from the user

2. Think about it using an LLM ("What kind of holiday experience does the user want?")

3. Take actions by calling external services and APIs

4. Think again about the results ("Do these options match their preferences? Do I need more information?")

5. Repeat until the task is complete

For example, when you say "plan me an adventure holiday in Costa Rica," an AI agent might:

• Ask the LLM to extract details (budget, interests, group size, dates)

• Call tourism APIs to find available activities and accommodations

• Check weather services for seasonal considerations

• Ask the LLM to analyze options against your adventure preferences

• Present a complete itinerary with bookable options

The API Chaos Problem

Here's where things get complicated. Every travel service has its own API:

• Airbnb uses /v2/listings/search

• TripAdvisor uses /experiences/search

• National Parks Service uses /parks/activities

• Local tour operators each have unique endpoints

// The nightmare of integrating multiple travel APIs - each one is different!

class HolidayPlanningAgent {
  
  async findAccommodations(destination, checkin, checkout, guests) {
    let results = [];
    
    // Airbnb - uses Bearer token, POST request
    const airbnbResponse = await fetch(`https://api.airbnb.com/v2/listings/search`, {
      method: 'POST',
      headers: { 'Authorization': `Bearer ${this.airbnbToken}` },
      body: JSON.stringify({
        location: destination,        // calls it 'location'
        check_in: checkin,           // underscore format
        adults: guests
      })
    });
    // Returns: { listings: [{ price_per_night, coordinates: {lat, lng} }] }
    
    // Booking.com - uses Basic auth, GET request  
    const bookingResponse = await fetch(`https://distribution-xml.booking.com/2.4/json/hotelAvailability`, {
      method: 'GET',
      headers: { 'Authorization': `Basic ${this.bookingAuth}` },
      params: {
        city: destination,           // calls it 'city'
        checkin_date: checkin,      // different naming
        room1: `A,A,${guests}`      // completely different format
      }
    });
    // Returns: { result: [{ min_total_price, latitude, longitude }] }

    // Hotels.com - uses API key, different date format
    const hotelsResponse = await fetch(`https://api.ean.com/ean-services/rs/hotel/v3/list`, {
      headers: { 'Authorization': `EAN APIKey=${this.hotelsKey}` },
      params: {
        destinationString: destination,    // yet another name
        arrivalDate: checkin.replace(/-/g, '/'),  // wants MM/DD/YYYY format
        RoomGroup: `(A,${guests})`        // parentheses format
      }
    });
    // Returns: { HotelListResponse: { HotelList: { HotelSummary: [{ lowRate }] } } }
    
    return results; // Each API returns completely different data structures
  }

  async findActivities(destination, type) {
    // TripAdvisor
    await fetch(`https://api.tripadvisor.com/api/partner/2.0/experiences/search`, {
      params: { location: destination, category: this.mapToTripAdvisorCategory(type) }
    });
    // Returns: { data: [{ experience_id, title, price_from }] }

    // GetYourGuide  
    await fetch(`https://www.getyourguide.com/api/v1/activities`, {
      method: 'POST',
      body: JSON.stringify({
        data: { type: 'activity-search', attributes: { destination } }
      })
    });
    // Returns JSON API format: { data: [{ id, attributes: { title, price: { amount } } }] }

    // National Parks
    await fetch(`https://developer.nps.gov/api/v1/activities/parks`, {
      params: { q: destination }  // calls it 'q' instead of 'destination'
    });
    // Returns: { data: [{ parks: [{ fullName, entranceFees: [{ cost }] }] }] }
  }

  // Every API needs different category mappings
  mapToTripAdvisorCategory(type) {
    return { 'adventure': 'outdoor-activities', 'culture': 'cultural-tours' }[type];
  }
}

/*
The Problem: 
- 6 different authentication methods (Bearer, Basic, API Key)
- 6 different request formats (POST vs GET, different JSON structures)
- 6 different parameter names for the same concept (location vs city vs destinationString vs q)
- 6 different response formats to parse and normalize
- 6 different error handling approaches
- Constant maintenance as each API evolves independently

Result: You spend more time on API integration than actual holiday planning logic!
*/

Each returns data in different formats, requires different authentication, and has different parameter names. If you want your AI agent to work with hundreds of accommodation providers, activity companies, restaurants, and attractions, you'd need to write custom integration code for each one.

This is like having a universal remote control that needs a different button layout for every device—it's technically possible but practically unsustainable.

Model Context Protocol: The Universal Translator

Model Context Protocol (MCP) solves this problem by creating a standardized way for AI agents to communicate with external services. Instead of writing custom code for each travel API, you create an MCP server that acts as a translator between the standardized MCP language and the service's specific API.

Think of MCP as creating a universal interface. Instead of your AI agent needing to learn 1,000 different ways to say "find adventure activities," there's now one standard way that works with any MCP-compatible service.

The Three Pillars of MCP

Every MCP server exposes three types of capabilities:

1. Tools - The Actions

Tools are the things your AI agent can do. These are functions that perform actions or retrieve data:

• search_accommodations(location, checkin, checkout, guests)

• find_activities(destination, activity_type, difficulty_level)

• get_restaurant_recommendations(location, cuisine, budget)

• check_weather_forecast(destination, dates)

2. Resources - The Context

Resources are static information that helps the AI make better decisions:

• Destination guides and local customs

• Activity difficulty ratings and requirements

• Seasonal travel recommendations

• Visa and vaccination requirements

• Currency exchange rates and tipping guides

3. Prompts - The Wisdom

Prompts are pre-written instructions that help the AI use the tools correctly:

• "When planning adventure trips, always check weather patterns and seasonal accessibility"

• "For family holidays, prioritize activities suitable for all age groups mentioned"

• "When suggesting accommodations, consider proximity to planned activities"

The Architecture: Client Meets Server

MCP follows a simple client-server model:

MCP Client (your AI agent or IDE):

• Discovers what an MCP server can do

• Sends requests to perform actions

• Receives responses and data

MCP Server (the service provider):

• Exposes tools, resources, and prompts

• Handles the actual API calls to external services

• Returns standardized responses

The communication happens through JSON-RPC, a lightweight protocol that's like having a standardized conversation format:

Client: "Can you search for adventure activities?"
Server: "Yes, I can do that. Give me destination, activity type, and difficulty level."
Client: "Find zip-lining activities in Costa Rica for intermediate level"
Server: "Here are 8 zip-lining tours matching your criteria..."

The Communication Protocol: JSON-RPC 2.0

Before diving into the MCP specification itself, we need to understand how MCP clients and servers actually communicate with each other. MCP uses JSON-RPC 2.0 as its communication protocol—think of it as the "language" that clients and servers speak when exchanging information.

What is JSON-RPC?

JSON-RPC (JSON Remote Procedure Call) is a lightweight, stateless protocol that allows a client to call methods on a remote server and receive responses. It's essentially a standardized way to say "run this function with these parameters" across a network or between processes.

The "2.0" refers to the specification version, which defines exactly how requests and responses should be formatted. This standardization ensures that any JSON-RPC 2.0 client can communicate with any JSON-RPC 2.0 server, regardless of what programming language they're built with.

The Basic Structure

Every JSON-RPC request must include four elements:

// JSON-RPC 2.0 Request Structure
{
  "jsonrpc": "2.0",
  "method": "search_hotels",
  "params": {
    "destination": "Costa Rica",
    "checkin": "2024-12-15",
    "checkout": "2024-12-22",
    "guests": 2
  },
  "id": 1
}

// JSON-RPC 2.0 Response Structure (Success)
{
  "jsonrpc": "2.0",
  "result": {
    "hotels": [
      {
        "id": "hotel_123",
        "name": "Rainforest Lodge",
        "price_per_night": 150,
        "location": "Manuel Antonio",
        "rating": 4.5
      },
      {
        "id": "hotel_456", 
        "name": "Beach Resort",
        "price_per_night": 200,
        "location": "Guanacaste",
        "rating": 4.2
      }
    ]
  },
  "id": 1
}

// JSON-RPC 2.0 Response Structure (Error)
{
  "jsonrpc": "2.0",
  "error": {
    "code": -32602,
    "message": "Invalid params",
    "data": "Missing required parameter: destination"
  },
  "id": 1
}

Transport Mechanisms

JSON-RPC 2.0 is transport-agnostic, meaning the protocol doesn't dictate how messages are delivered. MCP supports two primary transport methods:

Standard I/O (stdio): Perfect for local development and testing. The MCP server runs as a subprocess, and messages are exchanged through standard input/output pipes. This is lightweight, secure, and ideal for IDEs like Cursor or VS Code extensions.

HTTP: Used when the MCP server is hosted remotely or needs to serve multiple clients simultaneously. Messages are sent as HTTP POST requests, making it easy to deploy MCP servers as web services.

MCP-Specific Conventions

While MCP uses standard JSON-RPC 2.0, it defines specific method names and parameter structures:

Discovery Methods:

• tools/list - Get available tools

• resources/list - Get available resources

• prompts/list - Get available prompts

Action Methods:

• tools/call - Execute a specific tool

• resources/read - Retrieve resource content

• prompts/get - Get a specific prompt

Notification Methods (no response expected):

• notifications/initialized - Client signals it's ready

• notifications/progress - Server reports progress updates

Error Handling

JSON-RPC 2.0 defines standard error codes that MCP extends:

• -32700 Parse error (invalid JSON)

• -32600 Invalid request (malformed JSON-RPC)

• -32601 Method not found

• -32602 Invalid params

• -32603 Internal error

• -32000 to -32099 Server-defined errors (MCP uses these for domain-specific issues)

This standardized approach means client applications can handle errors consistently across different MCP servers.

The beauty of this protocol choice is that it abstracts away all the complexity we saw in our API chaos examples. Instead of learning different authentication schemes, parameter formats, and response structures for each service, developers work with one consistent JSON-RPC interface while MCP servers handle the underlying API complexity behind the scenes.

The Ecosystem Effect

The real power of MCP emerges when it becomes widespread. Imagine a world where:

• Every major travel platform provides an MCP server

• Tourism boards offer MCP servers for their destinations

• AI development tools automatically discover and connect to travel MCP servers

• Building a holiday planning agent is as simple as configuring which destinations and services you want to include

• Your agent can seamlessly work with any new tourism service that supports MCP

We're moving toward a future where AI agents can plan and coordinate complex holiday experiences as easily as humans browse travel websites—and MCP is the standard that makes it possible.

What's Next?

Now that you understand the foundational concepts of MCP, you're ready to dive into the technical implementation. In the next article, we'll explore how to build your own MCP server, create custom tools, and integrate everything into a working AI agent system (basically into our Angular project).

The beauty of MCP is that once you understand these core concepts, the implementation becomes a matter of following the specification—and that's where the real fun begins.

Thanks for reading so far 🙏

I’d like to have your feedback, so please leave a comment, clap or follow. 👏

Spread the Angular love! 💜

If you liked it, share it among your community, tech bros and whoever you want! 🚀👥

Don’t forget to follow me and stay updated: 📱

• 🔗 LinkedIn

• 📝 Medium

• 🎥 YouTube

• 🐦 Twitter

Thanks for being part of this Angular journey! 👋😁

🆕 Last updated for Angular 22.0.0 — includes FormRoot directive, submission options, parse errors, transformedValue(), SignalFormControl bridge, debounce('blur'), reloadValidation(), getError(), ngNoCva, FVC template/reactive interop, inline debounce for async validators, and lazy field instantiation.

Introduction

Traditional Angular forms, while powerfu…

Read more

1. 🔥 @angular/core

a) Support TypeScript 5.9

b) Angular Components Now Use Real Tag Names in Tests - PR

Until now, there was a subtle but important difference between how your components behaved in tests versus production:

In Production: angular creates components using tag names inferred from their selectors:

@Component({selector: 'user-profile', template: '...'})
// Creates actual <user-profile> element

In Tests (Previously): TestBed always wrapped components in generic <div> elements:

const fixture = TestBed.createComponent(UserProfileComponent);
// Always created <div> regardless of selector

This mismatch could hide CSS styling issues, accessibility problems, or any logic that depended on the actual element tag name.

Angular now offers the inferTagName option to align test behavior with production:

// Option 1: Per-component basis
const fixture = TestBed.createComponent(UserProfileComponent, {
  inferTagName: true
});
// Now creates <user-profile> element in tests

// Option 2: Configure globally for all tests
TestBed.configureTestingModule({
  inferTagName: true,
  // ... other config
});

@Component({selector: 'my-button'}) 
// → Creates <my-button>

@Component({selector: 'custom-input[type="text"]'}) 
// → Creates <custom-input>

@Component({selector: '[data-widget]'}) 
// → Falls back to <div> (no tag name in selector)

@Component({template: '...'}) 
// → Creates <ng-component> (no selector)

c) Property-to-Attribute Mapping - PR

Previously, developers faced a choice between verbose syntax and potential SSR problems when working with ARIA attributes:

// Verbose but SSR-safe
<button [attr.aria-label]="buttonText">

// Clean but potential SSR issues  
<button [ariaLabel]="buttonText">

The problem: ARIA DOM properties don't always correctly reflect as HTML attributes during server-side rendering, potentially breaking accessibility for users with assistive technologies.

Angular now supports clean property binding syntax that automatically renders as proper HTML attributes:

// All of these now work identically and render correctly on SSR
<button [aria-label]="buttonText">     // New simplified syntax
<button [ariaLabel]="buttonText">      // Existing camelCase
<button [attr.aria-label]="buttonText"> // Explicit attribute binding

The enhancement includes intelligent mapping for all standard ARIA properties:

@Component({
  template: `
    <div [ariaLabel]="label"
         [ariaExpanded]="isExpanded" 
         [ariaDisabled]="isDisabled"
         [aria-hidden]="isHidden">
      <!-- All render as proper aria-* attributes -->
    </div>
  `
})

Automatic conversions include:

• ariaLabel → aria-label

• ariaExpanded → aria-expanded

• ariaHasPopup → aria-haspopup

• Plus 30+ other ARIA properties

The system intelligently prioritizes component inputs over attribute binding:

@Component({
  selector: 'custom-button'
})
class CustomButton {
  @Input() ariaLabel!: string; // This takes precedence
}

// Binds to component input, not HTML attribute
<custom-button [ariaLabel]="text">

This feature particularly shines in SSR scenarios where proper attribute rendering is crucial for accessibility:

// Server renders: <button aria-label="Save Document">
// Client hydrates seamlessly with identical markup
<button [aria-label]="saveLabel">

d) Promote zoneless to stable

As of Angular v20.2, Zoneless (provideZonelessChangeDetection) Angular is now stable and includes improvements in error handling and server-side rendering.

e) Control Flow Enhancement: as Aliases in @else if Blocks - PR

<!-- ✅ Enhanced: as works in @else if blocks -->
@if (user$ | async; as user) {
  <h1>Welcome, {{user.name}}</h1>
  <p>Role: {{user.role}}</p>
} @else if (userRole$ | async; as role) {
  <!-- 🎉 Now we can use 'as' here too! -->
  <p>Loading user data for {{role}}...</p>
  <p>Please wait while we fetch your {{role}} profile...</p>
} @else {
  <p>Please log in</p>
}

2. 🔥 @angular/common/http

a) Add referrer & integrity support for fetch requests in httpResource - PR

Currently, Angular's httpResource does not expose the referrer and integrity options from the underlying Fetch API.

Exposing these options would provide developers with finer control over the request's referrer and subresource integrity validation, which are important for ensuring security, privacy, and trust in critical resource fetching scenarios.

httpResource(() => ({
  url: '${CDN_DOMAIN}/assets/data.json',
  method: 'GET',
  referrer: 'no-referrer',
  integrity: 'sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GhEXAMPLEKEY='
}));

b) New redirected Property - PR

Angular's HttpClient now provides complete visibility into HTTP redirects with a new redirected property that aligns with the native Fetch API.

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  constructor(private http: HttpClient) {}
  
  getUserProfile(userId: string) {
    return this.http.get(`/api/users/${userId}`, { 
      observe: 'response' 
    }).pipe(
      tap(response => {
        if (response.redirected) {
          console.log('User profile request was redirected');
          console.log('Original URL:', `/api/users/${userId}`);
          console.log('Final URL:', response.url);
          
          // Track redirect for analytics
          this.trackRedirect('user-profile', response.url);
        }
      }),
      map(response => response.body)
    );
  }
  
  private trackRedirect(endpoint: string, finalUrl: string | null) {
    // Send redirect data to analytics service
    analytics.track('http_redirect', {
      endpoint,
      finalUrl,
      timestamp: new Date().toISOString()
    });
  }
}

3. 🔥 @angular/language-service

a) Angular Language Service Now Detects Deprecated APIs in Templates - PR

export class LegacyComponent {
  /**
   * @deprecated Use newProp instead
   */
  @Input() oldProp: string;
}

<!-- Your IDE will now show a suggestion diagnostic here -->
<legacy-component [oldProp]="someValue"></legacy-component>
                   ~~~~~~~ 'oldProp' is deprecated. Use newProp instead

b) Auto-Import for Angular Attributes: No More Manual Directive Imports - PR

When you use directive attributes in your templates, the IDE will now automatically suggest importing the directive for you.

<!-- Type this: -->
<div appHighlight="yellow">
     ↑ 
💡 Quick Fix: Import HighlightDirective from '@app/highlight'

// Automatically added to your component:
import { HighlightDirective } from '@app/highlight';

@Component({
  imports: [HighlightDirective], // ← Added automatically!
  template: `<div appHighlight="yellow">Content</div>`
})
export class MyComponent { }

4. 🔥 @angular/service-worker

a) Take Control of Service Worker Updates: Angular's New updateViaCache Configuration Option - PR

The new updateViaCache option allows you to specify exactly when the browser should check its HTTP cache when updating service workers or any scripts imported via importScripts(). This translates to:

Improved Performance Control: choose between 'imports', 'all', or 'none' to optimize your update strategy based on your application's specific needs.

Better Development Experience: gain more predictable behavior during development cycles, especially when testing service worker updates.

Production Optimization: fine-tune caching strategies for production deployments where update timing is critical.

export const appConfig: ApplicationConfig = {
  providers: [
    provideServiceWorker('ngsw-worker.js', {
      enabled: !isDevMode(),
      updateViaCache: 'imports', // New cache control option
      registrationStrategy: 'registerWhenStable:30000',
    }),
  ],
};

b) New proactive storage monitoring system that prevents cache failures before they happen - PR

The system monitors storage usage and alerts when capacity reaches 95% of the available quota:

private async detectStorageFull() {
  try {
    const estimate = await navigator.storage.estimate();
    const { quota, usage } = estimate;
    
    // Handle cases where quota or usage might be undefined
    if (typeof quota !== 'number' || typeof usage !== 'number') {
      return;
    }
    
    // Consider storage "full" if usage is >= 95% of quota
    // This provides a safety buffer before actual storage exhaustion
    const usagePercentage = (usage / quota) * 100;
    const isStorageFull = usagePercentage >= 95;
    
    if (isStorageFull) {
      this.debugHandler.log(
        'Storage is full or nearly full',
        `DataGroup(${this.config.name}@${this.config.version}).detectStorageFull()`,
      );
    }
  } catch {
    // Error estimating storage, possibly by unsupported browser.
  }
}

For PWA Applications

// Example of how this helps PWAs maintain offline functionality
if (storageNearFull) {
  // Implement cleanup strategies
  // Prioritize critical resources
  // Notify user about storage constraints
}

For Content-Heavy Apps

// Applications with large caching needs benefit from early warnings
if (storageApproachingLimit) {
  // Implement cache eviction policies
  // Compress cached data
  // Switch to selective caching strategies
}

Developers now get clear indicators when storage issues occur:

Storage is full or nearly full -DataGroup(api@v1.2.3).detectStorageFull()

c) Real-Time Version Failure Notifications - PR

Previously, when a Service Worker version encountered critical failures, applications would experience degraded functionality without clear visibility into the root cause. The system introduces a new VersionFailedEvent that provides comprehensive failure information:

/**
 * An event emitted when a specific version of the app has encountered a critical failure
 * that prevents it from functioning correctly.
 */
export interface VersionFailedEvent {
  type: 'VERSION_FAILED';
  version: {hash: string; appData?: object};
  error: string;
}

Automatic Client Notification

When a version fails, the Service Worker automatically notifies all affected clients. Applications can listen for version failures using the existing SwUpdate service:

@Component({
  selector: 'app-root',
  template: `
    <div class="app">
      @if (versionError()) {
        <div class="error-banner">
          <h3>Application Update Issue</h3>
          <p>{{versionError()}}</p>
          <button (click)="handleVersionFailure()">
            Refresh Application
          </button>
        </div>
      }
      
      <router-outlet />
    </div>
  `,
  styles: [`
    .error-banner {
      background: #fee;
      border: 1px solid #fcc;
      border-radius: 4px;
      padding: 16px;
      margin: 8px;
      color: #c66;
    }
    
    .error-banner button {
      background: #c66;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
      margin-top: 8px;
    }
  `]
})
export class AppComponent implements OnInit {
  versionError = signal<string | null>(null);
  
  constructor(private swUpdate: SwUpdate) {}
  
  ngOnInit() {
    // Listen for all version events
    this.swUpdate.versionUpdates.subscribe(event => {
      switch (event.type) {
        case 'VERSION_FAILED':
          this.handleVersionFailure(event);
          break;
        case 'VERSION_READY':
          this.handleVersionReady(event);
          break;
        case 'VERSION_DETECTED':
          this.handleVersionDetected(event);
          break;
      }
    });
  }
  
  private handleVersionFailure(event: VersionFailedEvent) {
    console.error('Service Worker version failed:', event);
    
    // Set user-friendly error message
    this.versionError.set(
      `Application version ${event.version.hash.substring(0, 8)} has encountered an error. ` +
      `Please refresh to restore full functionality.`
    );
    
    // Optional: Report to error monitoring service
    this.reportVersionFailure(event);
  }
  
  private handleVersionReady(event: VersionReadyEvent) {
    // Clear any previous errors when new version is ready
    this.versionError.set(null);
    console.log('New version ready:', event.latestVersion.hash);
  }
  
  private handleVersionDetected(event: VersionDetectedEvent) {
    console.log('New version detected:', event.latestVersion.hash);
  }
  
  handleVersionFailure() {
    // Force page reload to get latest version
    window.location.reload();
  }
  
  private reportVersionFailure(event: VersionFailedEvent) {
    // Example: Send to monitoring service
    // errorService.report({
    //   type: 'service-worker-version-failure',
    //   version: event.version.hash,
    //   error: event.error,
    //   userAgent: navigator.userAgent,
    //   timestamp: new Date().toISOString()
    // });
  }
}

Testing the Feature

The new functionality includes comprehensive test coverage:

it('processes version failed events with cache corruption error', (done) => {
  update.versionUpdates.subscribe((event) => {
    expect(event.type).toEqual('VERSION_FAILED');
    expect((event as VersionFailedEvent).version).toEqual({
      hash: 'B',
      appData: {name: 'test-app'},
    });
    expect((event as VersionFailedEvent).error).toContain('Cache corruption detected');
    done();
  });
  
  mock.sendMessage({
    type: 'VERSION_FAILED',
    version: {
      hash: 'B',
      appData: {name: 'test-app'},
    },
    error: 'Cache corruption detected during resource fetch',
  });
});

d) Better Service Worker Debugging: Angular Now Catches Message Errors - PR

When Service Workers receive corrupted or badly formatted messages, they would previously fail silently. Instead of silent failures, you now get clear logs when messages fail:

[SW] Message error occurred - data could not be deserialized
[SW] Driver.onMessageError(origin: https://myapp.com)

e) Modern Service Workers: Angular Adds ES Module Support - PR

Angular Service Workers now support ES modules with a new type configuration option, bringing modern JavaScript features like import and export to your Service Worker scripts.

// Enable ES modules in Service Workers
export const appConfig: ApplicationConfig = {
  providers: [
    provideServiceWorker('ngsw-worker.js', {
      enabled: !isDevMode(),
      type: 'module', // Enable ES module features
      scope: '/app',
      updateViaCache: 'imports'
    }),
  ],
};

f) Service Worker Error Handling: unhandled promise rejections - PR

Unhandled promise rejections happen when a Promise fails but there's no .catch() block or error handling to deal with it:

// Before: Silent failure scenario
class DataSyncService {
  syncUserPreferences() {
    // This could fail silently if the API is down
    fetch('/api/sync-preferences', {
      method: 'POST',
      body: JSON.stringify(this.preferences)
    })
    .then(response => response.json())
    .then(result => {
      // Update local cache
      this.updateLocalCache(result);
    });
    // No .catch() - failures would be silent!
  }
}

// After: With the new logging, you'd see in DevTools:
// "Unhandled promise rejection occurred: NetworkError: Failed to fetch"

5. 🔥 @angular/compiler-cli

a) Smart Template Diagnostics: Catch Function Reference Mistakes Before Runtime - PR

How many times have you written something like this and wondered why it displays [Function] instead of the actual value?

@Component({
  template: `<p>Welcome {{ getUserName }}</p>` // Missing parentheses!
})
class WelcomeComponent {
  getUserName(): string {
    return 'Sarah';
  }
}

The Solution: NG8117 Diagnostic

Angular now automatically detects this pattern and shows a clear warning:

❌ Before: Silent runtime behavior displaying [Function]
✅ Now: Compile-time warning with diagnostic NG8117

6. 🔥 @angular/animations

Say goodbye to @angular/animations (60KB bundle impact) and hello to native CSS animations with animate.enter and animate.leave in Angular 20.2!

Read more here.

7. 🔥 @angular/forms

a) FormArray Gets Efficient Multi-Control Push Support - PR

Previously, adding multiple controls to a FormArray required individual push() calls, each triggering change detection and validation events:

// Old approach - inefficient for large datasets
const formArray = new FormArray([]);
const newControls = [
  new FormControl('value1'),
  new FormControl('value2'),
  new FormControl('value3'),
  // ... potentially hundreds more
];

// Each push triggers valueChanges, statusChanges, and validation
newControls.forEach(control => {
  formArray.push(control); // Triggers events every time!
});

The push() method now supports both individual and batch operations:

// Before: Only single controls
push(control: TControl, options?: { emitEvent?: boolean }): void

// After: Single controls OR arrays of controls  
push(control: TControl | Array<TControl>, options?: { emitEvent?: boolean }): void

8. 🔥 @angular/router

a) Router Goes Reactive: New currentNavigation Signal Replaces Deprecated Method - PR

// Old approach - complex and inefficient
export class App {
  private router = inject(Router);
  
  // Required complex Observable setup
  isNavigating = toSignal(this.router.events.pipe(
    map(() => !!this.router.getCurrentNavigation()) // Deprecated method
  ));
  
  // Manual state checking
  checkNavigationState() {
    const nav = this.router.getCurrentNavigation(); // Deprecated
    return nav ? 'Navigating...' : 'Idle';
  }
}

// New approach - simple and reactive
export class App {
  private router = inject(Router);
  
  // Clean, reactive navigation state
  isNavigating = computed(() => !!this.router.currentNavigation());
  
  // Derive any navigation state reactively
  navigationState = computed(() => {
    const nav = this.router.currentNavigation();
    return nav ? 'Navigating...' : 'Idle';
  });
}

9. 🔥 @angular/platform-browser

a) Warns About Hydration and Blocking Navigation Conflicts - PR

When building Angular applications with server-side rendering (SSR), developers sometimes unknowingly combine features that don't work well together:

// This configuration causes subtle runtime issues
bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration(), // Enable hydration
    provideRouter(routes, 
      withEnabledBlockingInitialNavigation() // Enable blocking navigation
    )
  ]
});

// Console output:
// ⚠️ Configuration error: found both hydration and enabledBlocking initial navigation 
//    in the same application, which is a contradiction.

b) Angular Introduces IsolatedShadowDom Encapsulation - PR

⚠️ Note: This feature was not included in 20.2, but it may be included in the next 21.0 release.

Ever tried building a reusable component only to have it break when used in different projects?:

// Your beautiful blue button component
@Component({
  template: '<button class="btn">Click me</button>',
  styles: ['.btn { background: blue; color: white; }'],
  encapsulation: ViewEncapsulation.ShadowDom
})

/* Their global styles */
.btn { background: red !important; }

Your blue button becomes red! 😱 Shadow DOM was supposed to prevent this, but Angular's implementation had a leak. The solution:

// Now with TRUE isolation
@Component({
  template: '<button class="btn">Click me</button>',
  styles: ['.btn { background: blue; color: white; }'],
  encapsulation: ViewEncapsulation.IsolatedShadowDom // 🎉
})

// Result: Your button stays blue EVERYWHERE! 💙

When to Choose Each Mode

Use ViewEncapsulation.ShadowDom when:

• You need backward compatibility with existing applications

• You want some global styles to be available in your component

• You're gradually migrating to Shadow DOM

Use ViewEncapsulation.IsolatedShadowDom when:

• Building reusable component libraries

• Creating embeddable widgets for third-party sites

• Need guaranteed style isolation

• Following web standards precisely

• Building micro-frontends that must be completely isolated

10. 🔥 @angular/cli

a) New Angular MCP features

Angular CLI just added powerful AI integration capabilities through MCP (Model Context Protocol) server functionality.

Read more here.

Thanks for reading so far 🙏

I’d like to have your feedback, so please leave a comment, clap or follow. 👏

Spread the Angular love! 💜

If you liked it, share it among your community, tech bros and whoever you want! 🚀👥

Don't forget to follow me and stay updated: 📱

• 🔗 LinkedIn

• 📝 Medium

• 🎥 YouTube

• 🐦 Twitter

Thanks for being part of this Angular journey! 👋😁

Angular CLI 20.2 quietly introduced something that could fundamentally change how we develop Angular applications: Model Context Protocol (MCP) server functionality. If you’re wondering what tools are available and how to use them, you’re in the right place.

If you want to learn more about the beginning of the MCP servers and how Angular integrated its own, you can do it here.

Prerequisites & Core Concept

Before diving into the tools, it is essential to understand the roles of the three main components and what you need to get started:

Essential Prerequisites

• Node.js & npm: The Angular CLI MCP server is a Node.js process, so ensure you have a recent version of Node.js (v18 or newer is typically recommended).

• Angular CLI: The server functionality is built into the latest versions of the Angular CLI (@angular/cli).

• A Compatible AI Client: You must be using an IDE or editor with an AI agent that supports the Model Context Protocol (MCP), such as VS Code (with GitHub Copilot/Agent mode) or Cursor.

Configure your MCP following the official Angular MCP guide.

Important: Two Ways to Configure

Throughout this guide, you’ll see two ways to enable tools and modes:

1. Command Line - For testing or one-time use:

ng mcp --read-only -E modernize

2. Configuration File - For persistent setup in your IDE:

{
   “servers”: {
     “angular-cli”: {
       “command”: “npx”,
       “args”: [”-y”, “@angular/cli”, “mcp”, “--read-only”, “-E”, “modernize”]
     }
   }
}

Most users will use the configuration file approach as it persists across IDE sessions.

Read more

Why @angular/animations Is Being Retired

After eight years of service, @angular/animations is showing its age. Created before modern CSS features like @keyframes and hardware-accelerated transforms were widely supported, the package solved important problems, but now creates new ones:

Size Impact: the package adds approximately 60KB to your bundle size
Performance Issues: animations run in JavaScript without hardware acceleration
Learning Curve: Angular-specific API that doesn't translate to other frameworks
Integration Friction: difficlt to use with popular third-party animation libraries like GSAP or Anime.js

Meanwhile, the web platform has evolved dramatically, offering native animation capabilities that are faster, smaller, and more widely applicable.

Meet Your New Animation System: animate.enter and animate.leave

Starting in Angular 20.2.0, two powerful new features provide everything you need for smooth, performant animations:

Basic Usage: CSS Class Application

The simplest approach applies CSS animation classes automatically:

@Component({
  template: `
    @if (showMessage()) {
      <div animate.enter="slide-in" animate.leave="fade-out">
        Welcome to the future of Angular animations!
      </div>
    }
    <button (click)="toggle()">Toggle Message</button>
  `,
  styles: [`
    .slide-in {
      animation: slideIn 0.3s ease-out;
    }
    
    .fade-out {
      animation: fadeOut 0.2s ease-in;
    }
    
    @keyframes slideIn {
      from { transform: translateY(-20px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }
    
    @keyframes fadeOut {
      from { opacity: 1; }
      to { opacity: 0; }
    }
  `]
})
export class MessageComponent {
  showMessage = signal(false);
  
  toggle(): void {
    this.showMessage.update((v: boolean) => !v);
  }
}

Advanced Control with Animation Functions

For complex animations or third-party library integration, use function-based control:

@Component({
  template: `
    <div class="animation-playground">
      @if (showElement()) {
        <div class="animated-box"
             (animate.enter)="handleEnterAnimation($event)"
             (animate.leave)="handleLeaveAnimation($event)">
          <h3>Advanced Animation</h3>
          <p>Powered by GSAP integration</p>
        </div>
      }
      
      <button (click)="toggleElement()">
        {{showElement() ? 'Hide' : 'Show'}} Element
      </button>
    </div>
  `,
  styles: [`
    .animated-box {
      width: 300px;
      height: 200px;
      background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: white;
      margin: 20px 0;
    }
  `]
})
export class AdvancedAnimationComponent {
  showElement = signal(false);

  handleEnterAnimation(event: AnimationCallbackEvent): void {
    // Using GSAP for complex enter animation
    gsap.fromTo(event.target, 
      {
        scale: 0,
        rotation: -180,
        opacity: 0
      },
      {
        scale: 1,
        rotation: 0,
        opacity: 1,
        duration: 0.8,
        ease: "back.out(1.7)",
        onComplete: () => {
          // Animation complete callback is automatic for enter animations
          console.log('Enter animation completed!');
        }
      }
    );
  }

  handleLeaveAnimation(event: AnimationCallbackEvent): void {
    // Complex leave animation with staggered effects
    const timeline = gsap.timeline({
      onComplete: () => {
        // Must call this to complete the removal process
        event.animationComplete();
      }
    });

    timeline
      .to(event.target, {
        scale: 1.1,
        duration: 0.1,
        ease: "power2.out"
      })
      .to(event.target, {
        scale: 0,
        rotation: 180,
        opacity: 0,
        duration: 0.5,
        ease: "power2.in"
      });
  }

  toggleElement(): void {
    this.showElement.update((v: boolean) => !v);
  }
}

Host Element Animations

Apply animations directly to component host elements:

@Component({
  selector: 'notification-card',
  template: `
    <div class="notification-content">
      <h4>{{title()}}</h4>
      <p>{{message()}}</p>
      <button (click)="dismiss()">×</button>
    </div>
  `,
  host: {
    '[animate.enter]': 'enterAnimation',
    '[animate.leave]': 'leaveAnimation',
    'class': 'notification-card'
  },
  styles: [`
    :host {
      display: block;
      background: white;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      padding: 16px;
      margin: 8px 0;
      max-width: 400px;
    }
    
    .slide-in-right {
      animation: slideInRight 0.3s ease-out;
    }
    
    .slide-out-right {
      animation: slideOutRight 0.3s ease-in;
    }
    
    @keyframes slideInRight {
      from { transform: translateX(100%); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }
    
    @keyframes slideOutRight {
      from { transform: translateX(0); opacity: 1; }
      to { transform: translateX(100%); opacity: 0; }
    }
  `]
})
export class NotificationCardComponent {
  title = input.required<string>();
  message = input.required<string>();
  type = input<'success' | 'warning' | 'error'>('success');
  autoClose = input<boolean>(true);
  
  dismissed = output<void>();

  enterAnimation = 'slide-in-right';
  leaveAnimation = 'slide-out-right';

  // Auto-close functionality using signals
  private autoCloseTimer = signal<ReturnType<typeof setTimeout> | null>(null);

  constructor() {
    // Set up auto-close when enabled
    effect(() => {
      if (this.autoClose()) {
        const timer = setTimeout(() => this.dismiss(), 5000);
        this.autoCloseTimer.set(timer);
      }
    });
  }

  dismiss() {
    const timer = this.autoCloseTimer();
    if (timer) {
      clearTimeout(timer);
      this.autoCloseTimer.set(null);
    }
    this.dismissed.emit();
  }
}

// Usage in parent component with signal inputs
@Component({
  template: `
    <div class="notifications">
      @for (notification of notifications(); track notification.id) {
        <notification-card 
          [title]="notification.title"
          [message]="notification.message"
          [type]="notification.type"
          [autoClose]="notification.autoClose"
          (dismissed)="removeNotification(notification.id)" />
      }
    </div>
    
    <div class="controls">
      <button (click)="addSuccessNotification()">Add Success</button>
      <button (click)="addWarningNotification()">Add Warning</button>
      <button (click)="addErrorNotification()">Add Error</button>
    </div>
  `,
  styles: [`
    .notifications {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1000;
    }
    
    .controls {
      margin: 20px;
    }
    
    .controls button {
      margin-right: 10px;
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  `]
})
export class NotificationContainerComponent {
  notifications = signal<Array<{
    id: number;
    title: string;
    message: string;
    type: 'success' | 'warning' | 'error';
    autoClose: boolean;
  }>>([]);
  
  private nextId = signal(1);

  addSuccessNotification() {
    this.addNotification({
      title: 'Success!',
      message: 'Operation completed successfully!',
      type: 'success',
      autoClose: true
    });
  }

  addWarningNotification() {
    this.addNotification({
      title: 'Warning',
      message: 'Please review your settings.',
      type: 'warning',
      autoClose: false
    });
  }

  addErrorNotification() {
    this.addNotification({
      title: 'Error',
      message: 'Something went wrong. Please try again.',
      type: 'error',
      autoClose: false
    });
  }

  private addNotification(notificationData: Omit<any, 'id'>) {
    const newNotification = {
      id: this.nextId(),
      ...notificationData
    };
    
    this.nextId.update(id => id + 1);
    this.notifications.update(notifications => 
      [...notifications, newNotification]
    );
  }

  removeNotification(id: number) {
    this.notifications.update(notifications => 
      notifications.filter(n => n.id !== id)
    );
  }
}

Testing Support

Angular provides an ANIMATIONS_DISABLED token for test environments:

TestBed.configureTestingModule({
  providers: [
    { provide: ANIMATIONS_DISABLED, useValue: true }
  ]
});

When disabled, animations complete immediately while still triggering all lifecycle events.

Migration Strategy

For existing @angular/animations users, Angular provides a comprehensive migration guide. The most common patterns translate directly:

Before (Angular Animations):

@Component({
  animations: [
    trigger('slideIn', [
      transition(':enter', [
        style({ transform: 'translateX(-100%)' }),
        animate('300ms ease-in', style({ transform: 'translateX(0%)' }))
      ])
    ])
  ]
})

After (Native Animations):

@Component({
  template: `<div animate.enter="slide-in">`,
  styles: [`
    .slide-in {
      animation: slideIn 300ms ease-in;
    }
    @keyframes slideIn {
      from { transform: translateX(-100%); }
      to { transform: translateX(0%); }
    }
  `]
})

The Future is Bright

This change represents more than just a new API—it's Angular's commitment to embracing web standards while providing the developer experience you expect. By moving to native CSS animations, Angular applications become:

• Faster: hardware-accelerated animations

• Smaller: no large animation runtime

• More Portable: skills transfer across frameworks

• More Flexible: easy third-party library integration

The animations field in component decorators is officially deprecated as of Angular 20.2 and will be removed in version 23, giving developers a clear migration timeline.

Thanks for reading so far 🙏

I’d like to have your feedback, so please leave a comment, clap or follow. 👏

Spread the Angular love! 💜

If you liked it, share it among your community, tech bros and whoever you want! 🚀👥

Don't forget to follow me and stay updated: 📱

• 🔗 LinkedIn

• 📝 Medium

• 🎥 YouTube

• 🐦 Twitter

Thanks for being part of this Angular journey! 👋😁

Large Language Models (LLMs) like ChatGPT, Claude, and Gemini have fundamentally changed how we think about software interaction. These AI systems, trained on vast amounts of text data, can understand and generate human-like responses. But here's the thing: they're incredibly powerful yet frustratingly isolated. They can write brilliant code, explain complex concepts, and solve problems, but they can't do anything in your development environment.

Imagine having a brilliant coding assistant who can tell you exactly how to fix a bug but can't see your actual codebase, can't run your tests, and can't understand your project structure. That's been the reality for most AI coding tools until now.

Enter the Model Context Protocol

In November 2024, Anthropic (the company behind Claude) introduced something called the Model Context Protocol. Think of MCP as the missing bridge between AI models and the real world of development tools. It's an open standard that allows AI systems to securely connect to external data sources, tools, and services.

Here's what makes MCP revolutionary: instead of building custom integrations for every single tool, MCP provides a universal language that AI systems can use to communicate with any compatible service. It's like creating a USB-C standard for AI connectivity.

The protocol caught fire quickly. By March 2025, even OpenAI (Anthropic's biggest competitor) had adopted it. Google DeepMind followed suit in April. When fierce competitors agree on a standard this quickly, you know something big is happening.

Angular's Smart Move

Now, here's where Angular's implementation gets interesting. The Angular team didn't just add MCP support – they've positioned Angular as an AI-first development platform. When you run ng mcp, you're not just starting a server; you're making your entire Angular workspace available to AI systems in a structured, secure way.

The current implementation provides two key capabilities:

1. Angular Best Practices as AI Knowledge: The MCP server exposes Angular's official best practices and coding guidelines directly to AI systems. This means when an AI is helping you code, it has immediate access to the latest Angular conventions, TypeScript patterns, and framework-specific guidance.

2. Project Structure Awareness: The server can list and understand your Angular workspace structure, reading from your angular.json file. This gives AI systems spatial awareness of your project – they know what apps and libraries you have, how they're organized, and can provide contextually relevant suggestions.

Getting Started

Run ng mcp and you'll get instructions for configuring your AI host to connect to your Angular workspace:

ng mcp

// If it's the first time, it will print this:                                                                            

To start using the Angular CLI MCP Server, add this configuration to your host:

{
  "servers": {
    "angular-cli": {
      "command": "npx",
      "args": ["@angular/cli", "mcp"]
    }
  }
}

In my case, I’m using VS Code, and this is the configuration I need to add: .vscode/mcp.json. To check the configuration for other IDEs, follow the Angular guide.

Now, if you go to your Copilot in Agent mode (look at tools), you have enabled those features:

From now on, if you chat (Copilot, Amazon Q…), these features will be applied. Remember that you can do the same in other IDEs or desktop LLM clients.

Conclusion

Angular's MCP support might seem like a small feature update, but it represents something much bigger: the transformation of Angular from a framework you use to build applications into a platform for AI-assisted development.

Thanks for reading so far 🙏

I’d like to have your feedback, so please leave a comment, clap or follow. 👏

Spread the Angular love! 💜

If you liked it, share it among your community, tech bros and whoever you want! 🚀👥

Don't forget to follow me and stay updated: 📱

• 🔗 LinkedIn

• 📝 Medium

• 🎥 YouTube

• 🐦 Twitter

Thanks for being part of this Angular journey! 👋😁

Let's be honest - @angular/animations has been showing its age. Here's what's been bothering developers:

• Heavy bundle impact: 60kb of JavaScript just for animations

• No hardware acceleration: Animations run in JavaScript instead of leveraging the GPU

• Angular-only skills: The API doesn't translate to other frameworks or vanilla web development

• Third-party integration pain: Want to use GSAP or Anime.js? Good luck with that.

Enter the New Champions: animate.in and animate.out

The Angular team is introducing two new native framework features that will revolutionize how we animate elements entering and leaving the DOM.

The Sweet Syntax

<!-- CSS Classes (Simple and Clean) -->
<my-component animate.out="fade-out" />
<my-component [animate.in]="dynamicAnimationClasses" />

<!-- JavaScript Functions (For the Power Users) -->
<my-component (animate.out)="customExitAnimation($event)" />
<my-component (animate.in)="handleEntryAnimation($event)" />

Why This Matters

animate.out solves the biggest pain point in CSS animations - you can't easily animate an element out of the DOM because... well, once it's removed, it's gone! This feature delays element removal until your animation completes.

animate.in provides symmetry and consistency, automatically removing CSS classes when animations finish. While CSS now has @starting-styles for this, having both features creates a cohesive API.

Real-World Examples

CSS-Based Animations

<div class="card" 
     animate.in="slide-in-from-left"
     animate.out="fade-out-scale">
  <h3>I animate beautifully!</h3>
</div>

.slide-in-from-left {
  animation: slideIn 0.3s ease-out;
}

.fade-out-scale {
  animation: fadeOutScale 0.25s ease-in;
}

Third-Party Library Integration

// GSAP Animation
animateWithGSAP = (event: AnimationEvent) => {
  gsap.to(event.element, {
    rotation: 360,
    scale: 0,
    duration: 0.5,
    ease: "back.in",
    onComplete() {
      event.animationComplete();
    }
  });
}

<div (animate.out)="animateWithGSAP($event)">
  Powered by GSAP!
</div>

What's Different About This Approach?

🚀 Performance First

• Native CSS animations with hardware acceleration

• Tree-shakeable and optimized

• No 60kb animation library dependency

🎯 Platform-Aligned

• Works with modern CSS features like @starting-styles

• Skills transfer to other frameworks and vanilla web dev

• Embraces web standards

🔧 Developer Experience

• Simple syntax that follows Angular conventions

• Works with CSS classes or JavaScript functions

• Host binding support for reusable animation directives

🧪 Testing-Friendly

• Animations can be disabled in test environments

• Maintains element lifecycle for reliable testing

The Great Naming Debate

The community is split on naming conventions:

• Team animate.in/out: Short, clear, and follows the dot notation pattern

• Team animate.enter/leave: More descriptive and aligns with existing animation terminology

The Angular team seems to be leaning toward animate.in and animate.out to maintain consistency with other dot-notation bindings like class. and style..

What This Means for Your Apps

Migration Path

The Angular team is creating comprehensive migration guides from @angular/animations to pure CSS. The old system will coexist during the transition period, so no rush!

Bundle Size Impact

Removing the animations package dependency could save you 60kb of JavaScript - that's significant for performance, especially on mobile devices.

Future-Proofing

As web standards evolve (hello, scoped view transitions!), this approach positions Angular to adopt new capabilities without major API changes.

Key Takeaways

1. @angular/animations is being deprecated - but not immediately removed

2. animate.in and animate.out are coming - built into the framework core

3. CSS-first approach - embrace modern web platform capabilities

4. Third-party library friendly - use GSAP, Anime.js, or whatever you prefer

5. Performance wins - hardware acceleration and smaller bundles

Try It Out

The Angular team has provided a StackBlitz prototype where you can experiment with the new features (CSS classes only for now).

Check the complete RFC here.

The Bottom Line

This RFC represents Angular's commitment to evolving with web standards while maintaining the developer experience that makes the framework special. By embracing CSS-native animations and providing escape hatches for complex scenarios, Angular is positioning itself for the next generation of web applications.

If you are interested in a guide on old Angular animations, I have a complete tutorial about it on YouTube.

Thanks for reading so far 🙏

I’d like to have your feedback, so please leave a comment, clap or follow. 👏

Spread the Angular love! 💜

If you liked it, share it among your community, tech bros and whoever you want! 🚀👥

Don't forget to follow me and stay updated: 📱

• 🔗 LinkedIn

• 📝 Medium

• 🎥 YouTube

• 🐦 Twitter

Thanks for being part of this Angular journey! 👋😁

🔥 @angular/core

1. New destroyed Property on DestroyRef (#61849)

Angular 20.1.0 adds a destroyed property to DestroyRef that lets you check if a component is already destroyed before registering cleanup callbacks, preventing runtime errors.

import { Component, inject, signal, ChangeDetectionStrategy } from '@angular/core';
import { DestroyRef } from '@angular/core';

@Component({
  selector: 'app-safe-cleanup',
  template: `
    <div class="cleanup">
      <p>Status: {{ status() }}</p>
      <button 
        type="button"
        (click)="handleAsyncOperation()"
        [disabled]="loading()">
        Start Operation
      </button>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class SafeCleanupComponent {
  private readonly _destroyRef = inject(DestroyRef);
  
  loading = signal(false);
  status = signal('Ready');

  handleAsyncOperation(): void {
    this.loading.set(true);
    
    setTimeout(() => {
      // Check before registering cleanup
      if (!this._destroyRef.destroyed) {
        this._destroyRef.onDestroy(() => {
          console.log('Cleanup executed');
        });
        
        this.loading.set(false);
        this.status.set('Completed');
      }
    }, 2000);
  }
}

2. TestBed: New Bindings Support 🧪 (#62040)

Angular's TestBed.createComponent() now supports direct component bindings, eliminating the need for wrapper components in tests.

interface TestComponentOptions {
  bindings?: Binding[];
}

TestBed.createComponent<T>(
  component: Type<T>, 
  options?: TestComponentOptions
): ComponentFixture<T>

// Examples
it('should bind to inputs', () => {
  const value = signal(10);
  const fixture = TestBed.createComponent(MyComponent, {
    bindings: [inputBinding('value', value)]
  });
  
  fixture.detectChanges();
  expect(fixture.componentInstance.value).toBe(10);
  
  value.set(20); // Reactive updates work!
  fixture.detectChanges();
  expect(fixture.componentInstance.value).toBe(20);
});

it('should bind to outputs', () => {
  let clickCount = 0;
  const fixture = TestBed.createComponent(MyComponent, {
    bindings: [outputBinding('click', () => clickCount++)]
  });
  
  // Trigger component event
  fixture.componentInstance.click.emit();
  expect(clickCount).toBe(1);
});

it('should support two-way binding', () => {
  const value = signal('initial');
  const fixture = TestBed.createComponent(MyComponent, {
    bindings: [twoWayBinding('value', value)]
  });
  
  // Changes propagate both ways automatically
  value.set('updated');
  fixture.detectChanges();
  expect(fixture.componentInstance.value).toBe('updated');
});

3. Add destroyed property to EnvironmentInjector - PR

Ever wondered if that dynamically created EnvironmentInjector is still alive? Angular's latest enhancement adds a destroyed property to EnvironmentInjector, giving you the same lifecycle awareness that DestroyRef brought to components.

The Problem This Solves

When working with dynamic injectors (especially in complex applications with lazy loading or dynamic component creation), developers often faced a black box situation:

// Before: No way to know if injector is still valid
const dynamicInjector = createEnvironmentInjector([SomeService], parentInjector);

// Later in code... is this safe?
// 🤷‍♀️ Could throw if destroyed
const service = dynamicInjector.get(SomeService);

// After: Crystal clear lifecycle management
const dynamicInjector = createEnvironmentInjector([SomeService], parentInjector);

// Check if it's still alive
if (!dynamicInjector.destroyed) {
  const service = dynamicInjector.get(SomeService); // ✅ Safe!
}

// Register cleanup callbacks
dynamicInjector.onDestroy(() => {
  console.log('Injector is being destroyed!');
  // Cleanup logic here
});

🔥 @angular/common

1. NgOptimizedImage: New decoding Attribute Support (#61905)

Angular's NgOptimizedImage directive now supports the native HTML decoding attribute, giving developers control over image decoding behavior for better performance optimization.

@Input() decoding?: 'sync' | 'async' | 'auto';

<!-- Default behavior (auto) -->
<img ngSrc="hero.jpg" width="800" height="400">

<!-- Priority image (automatically gets sync) -->
<img ngSrc="hero.jpg" width="800" height="400" priority>

<!-- Custom decoding strategy -->
<img ngSrc="gallery.jpg" width="300" height="200" decoding="async">

Smart Defaults:

• Default images: decoding="auto" (browser decides)

• Priority images: decoding="sync" (immediate decoding for faster LCP)

• Custom override: Developers can specify any valid value

2. NgComponentOutlet Just Learned Module Federation Magic - PR

Ever tried to dynamically load a component from a remote micro-frontend and watched it fail miserably because it couldn't find its services? That dependency injection nightmare just got solved.

NgComponentOutlet now supports a custom EnvironmentInjector input, making it a first-class citizen for Module Federation and micro-frontend architectures.

@Component({
  selector: 'tenant-dashboard',
  template: `
    <!-- Each tenant gets their own component with their own services -->
    <div *ngFor="let tenant of tenants">
      <ng-container 
        *ngComponentOutlet="tenantComponent;
                            environmentInjector: tenant.injector;
                            inputs: { tenantId: tenant.id }">
      </ng-container>
    </div>
  `
})
export class MultiTenantDashboard {
  tenants: Array<{
    id: string;
    injector: EnvironmentInjector;
  }> = [];
  
  tenantComponent = TenantSpecificComponent;
  
  async loadTenant(tenantConfig: TenantConfig) {
    // Load tenant-specific module with its own services
    const tenantModule = await import(`./tenants/${tenantConfig.name}.module`);

    // ✅ Gets its own injection context!
    const tenantInjector = createEnvironmentInjector(
      tenantModule.providers,
      this.currentInjector
    );
    
    this.tenants.push({
      id: tenantConfig.id,
      injector: tenantInjector
    });
  }
}

🔥 @service-worker

1. Service Worker Notification Close Events (#61442)

Adds support for tracking when push notifications are closed or dismissed. Now you can react when users dismiss notifications, not just when they click them.

Before this feature, you could only track when users clicked notifications. Now you can also track when they dismiss them, giving you complete visibility into notification interactions.

2. Push Subscription Change Detection (#61856)

When browsers refresh or invalidate push subscriptions, your app can now react automatically to maintain reliable notifications.

Push subscriptions can change without user action:

• Browser updates subscription keys

• Security tokens expire and refresh

• Network changes trigger re-registration

• Browser maintenance invalidates old subscriptions

Previously, your app wouldn't know about these changes, causing push notifications to silently fail.

🔥 @angular/build

1. Customizable Code Coverage Reporters (PR)

Adds a codeCoverageReporters option to the experimental unit-test builder, allowing you to customize how test coverage results are generated and formatted.

Previously, you could only enable/disable code coverage. Now you can:

• Choose specific output formats (HTML, LCOV, XML, etc.)

• Generate multiple report formats simultaneously

• Customize individual reporter options

• Better integrate with CI/CD pipelines and external tools

This only works if you set codeCoverage option to true:

// angular.json - Basic Configuration
{
  "projects": {
    "my-app": {
      "architect": {
        "test": {
          "builder": "@angular/build:unit-test",
          "options": {
            "buildTarget": "my-app:build",
            "tsConfig": "tsconfig.spec.json",
            "runner": "vitest",
            "codeCoverage": true,
            "codeCoverageReporters": ["html", "lcov", "text-summary"]
          }
        }
      }
    }
  }
}

// Advanced Configuration with Custom Options
{
  "projects": {
    "my-app": {
      "architect": {
        "test": {
          "builder": "@angular/build:unit-test",
          "options": {
            "buildTarget": "my-app:build",
            "tsConfig": "tsconfig.spec.json",
            "runner": "vitest",
            "codeCoverage": true,
            "codeCoverageReporters": [
              "text-summary",
              ["html", { "subdir": "html-report" }],
              ["lcov", { "file": "lcov.info" }],
              ["cobertura", { "file": "cobertura.xml" }]
            ]
          }
        }
      }
    }
  }
}

Available Reporter Types

1. HTML Reporter

{
  "codeCoverageReporters": [
    ["html", {
      "subdir": "coverage-html",
      "skipEmpty": false
    }]
  ]
}

Output: Interactive HTML report with detailed file-by-file coverage Best for: Local development, detailed analysis

2. LCOV Reporter

{
  "codeCoverageReporters": [
    ["lcov", {
      "file": "lcov.info",
      "projectRoot": "src/"
    }]
  ]
}

Output: LCOV format compatible with many tools Best for: CI/CD integration, SonarQube, Codecov

3. Text Summary

{
  "codeCoverageReporters": ["text-summary"]
}

Output: Console summary with overall percentages Best for: Quick CLI feedback

4. Cobertura XML

{
  "codeCoverageReporters": [
    ["cobertura", {
      "file": "cobertura-coverage.xml"
    }]
  ]
}

Output: XML format for Jenkins, Azure DevOps Best for: Enterprise CI/CD systems

🔥 @angular/compiler

1. Enhanced Binary Assignment Operators in Templates - PR

Angular 20.1.0 will introduce expanded support for binary assignment operators in templates, bringing Angular's expression syntax closer to standard JavaScript and making template code more concise and intuitive.

<button (click)="counter += 1">Increment</button>
<button (click)="counter -= 1">Decrement</button>
<button (click)="value *= 2">Double</button>

🔥 @angular/common/http

Both HttpClient and httpResource now expose key Fetch API options that were previously impossible to control.

🎯 What's New:

• priority – Tell the browser which requests are critical vs background

• cache – Control browser caching behavior (force-cache, no-store, etc.)

• credentials – Fine-tune cookie and authentication handling

• timeout – Built-in request timeouts (no more manual AbortController!)

• mode & redirect – Precise CORS and redirect control

• keepalive – Requests survive page navigation

// Before: Basic HTTP with limited control
this.http.get('/api/data');

// After: Browser-native performance tuning
this.http.get('/api/critical-data', {
  priority: 'high',        // 🏎️ VIP network treatment
  cache: 'force-cache',    // ⚡ Instant subsequent loads  
  timeout: 2000,          // ⏱️ No hanging requests
  keepalive: true         // 🔄 Survives navigation
});

// Same powers in httpResource!
const data = httpResource(() => ({
  url: '/api/live-data',
  priority: 'auto',
  cache: 'no-store'       // Always fresh
}));

🏗️ The Complete Fetch Feature Matrix

*Timeout is an Angular addition - fetch doesn't have native timeout

This isn't just about adding features - it's about fundamentally upgrading Angular's HTTP layer to match modern web platform capabilities. Every single fetch API feature is now available in Angular, with the same ease of use developers expect.

The result: Angular applications can now achieve native browser performance for HTTP operations while maintaining Angular's developer experience and ecosystem benefits.

🔥 @language-service

1. add semantic tokens for templates - PR

Ever envied how JetBrains IDEs make Angular component tags pop with perfect syntax highlighting while VS Code treats them like regular HTML? That gap just closed.

Angular's Language Service now provides semantic tokens for templates, bringing contextual syntax highlighting that understands your code's meaning, not just its text patterns.

<!-- All tags look the same -->
<div>Regular HTML</div>
<app-user-card>Angular Component</app-user-card>
<button>Another HTML element</button>

<!-- Now with semantic awareness! -->
<div>Regular HTML</div>           <!-- HTML element color -->
<app-user-card>Component</app-user-card>  <!-- Class/component color -->  
<button>HTML element</button>     <!-- HTML element color -->

2. Support to fix missing required inputs diagnostic - PR

Imagine typing <app-user-card></app-user-card> and VS Code immediately says: "Hey, you forgot the required user input. Want me to fix that?" That's exactly what just happened.

Angular's Language Service now provides intelligent quick fixes for missing required inputs, turning template errors into one-click solutions.

<!-- Before -->
<app-user-profile></app-user-profile>
!--  ~~~~~~~~~~~~~~~~ 🚨 Red squiggly line appears -->

<!-- After quick fix -->
<app-user-profile [user]=""></app-user-profile>
<!--                 ~~~~~~~~ ✨ Added automatically! -->

🔥 @angular/router

1. Run loadComponent and loadChildren functions in the route's injection context - PR

Ever tried using inject() inside a loadChildren or loadComponent function and hit this frustrating error?

// NG0203: inject() must be called from an injection context

// ❌ This would throw an error
{
  path: 'dashboard',
  loadComponent: () => {
    const config = inject(FeatureConfig); // 💥 NG0203 Error!
    return config.useAdvancedDashboard 
      ? import('./advanced-dashboard.component')
      : import('./basic-dashboard.component');
  }
}

// ✅ This works perfectly!
{
  path: 'dashboard', 
  loadComponent: () => {
    const config = inject(FeatureConfig); // 🎯 Works like magic!
    return config.useAdvancedDashboard
      ? import('./advanced-dashboard.component')
      : import('./basic-dashboard.component');
  }
}

Here is a good article with examples.

🔥 @angular/cli

1. MCP Server Implementation - PR

An initial experimental implementation of a Model Context Protocol (MCP) server is now available as a command within the Angular CLI.

Check out my post about the comprehensive guide to Angular MCP Server, including the latest best practices.

🔥 Angular Material (components)

1. CDK Drag-Drop Anchor Elements - cdk - PR

Adds cdkDropListHasAnchor to the CDK drag-drop module. This creates an "anchor" element that stays in the original position when dragging items between lists, perfect for copy operations.

Before: When dragging items between lists, the placeholder moves with the item, making it look like the item is being moved (not copied).

After: With anchor elements, the original position is preserved visually, making copy operations feel more natural.

import { Component, signal } from '@angular/core';
import { CdkDragDrop, moveItemInArray, copyArrayItem, CdkDrag, CdkDropList } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-shopping-cart',
  template: `
    <div class="shopping-container">
      <div class="shopping-container__section">
        <h3>Available Products</h3>
        
        <div
          cdkDropList
          [cdkDropListData]="products()"
          [cdkDropListConnectedTo]="[cartList]"
          cdkDropListSortingDisabled
          cdkDropListHasAnchor
          class="product-list"
          (cdkDropListDropped)="_handleProductDrop($event)">
          
          @for (product of products(); track product.id) {
            <div class="product-item" cdkDrag [cdkDragData]="product">
              <div class="product-item__info">
                <h4>{{ product.name }}</h4>
                <p class="product-item__price">\${{ product.price }}</p>
              </div>
              <div class="product-item__stock">
                Stock: {{ product.stock }}
              </div>
            </div>
          }
        </div>
      </div>

      <div class="shopping-container__section">
        <h3>Shopping Cart ({{ cartTotal() }} items)</h3>
        
        <div
          cdkDropList
          #cartList="cdkDropList"
          [cdkDropListData]="cart()"
          class="cart-list"
          (cdkDropListDropped)="_handleCartDrop($event)">
          
          @for (item of cart(); track item.id) {
            <div class="cart-item" cdkDrag>
              <div class="cart-item__info">
                <h4>{{ item.name }}</h4>
                <p class="cart-item__quantity">Qty: {{ item.quantity }}</p>
              </div>
              <div class="cart-item__total">
                \${{ (item.price * item.quantity).toFixed(2) }}
              </div>
              <button 
                type="button"
                class="cart-item__remove"
                (click)="_removeFromCart(item.id)">
                ×
              </button>
            </div>
          }
          
          @if (cart().length === 0) {
            <div class="cart-list__empty">
              Drag products here to add to cart
            </div>
          }
        </div>
        
        @if (cart().length > 0) {
          <div class="cart-summary">
            <div class="cart-summary__total">
              Total: \${{ cartTotalPrice().toFixed(2) }}
            </div>
            <button 
              type="button"
              class="cart-summary__checkout"
              (click)="_checkout()">
              Checkout
            </button>
          </div>
        }
      </div>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ShoppingCartComponent {
  products = signal([
    { id: 1, name: 'Wireless Headphones', price: 99.99, stock: 15 },
    { id: 2, name: 'Smartphone Case', price: 24.99, stock: 8 },
    { id: 3, name: 'USB-C Cable', price: 12.99, stock: 25 },
    { id: 4, name: 'Portable Charger', price: 49.99, stock: 12 },
    { id: 5, name: 'Bluetooth Speaker', price: 79.99, stock: 6 }
  ]);
  
  cart = signal<Array<{
    id: number;
    name: string;
    price: number;
    quantity: number;
  }>>([]);
  
  cartTotal = computed(() => 
    this.cart().reduce((sum, item) => sum + item.quantity, 0)
  );
  
  cartTotalPrice = computed(() =>
    this.cart().reduce((sum, item) => sum + (item.price * item.quantity), 0)
  );

  _handleProductDrop(event: CdkDragDrop<any[]>): void {
    // Products can only be copied to cart, not rearranged
    if (event.previousContainer !== event.container) {
      const product = event.previousContainer.data[event.previousIndex];
      this._addToCart(product);
    }
  }

  _handleCartDrop(event: CdkDragDrop<any[]>): void {
    if (event.previousContainer === event.container) {
      // Reorder items in cart
      const cartItems = [...this.cart()];
      moveItemInArray(cartItems, event.previousIndex, event.currentIndex);
      this.cart.set(cartItems);
    } else {
      // Add product from product list
      const product = event.previousContainer.data[event.previousIndex];
      this._addToCart(product);
    }
  }

  _addToCart(product: any): void {
    const currentCart = [...this.cart()];
    const existingItem = currentCart.find(item => item.id === product.id);
    
    if (existingItem) {
      existingItem.quantity += 1;
    } else {
      currentCart.push({
        id: product.id,
        name: product.name,
        price: product.price,
        quantity: 1
      });
    }
    
    this.cart.set(currentCart);
  }

  _removeFromCart(productId: number): void {
    this.cart.update(cart => cart.filter(item => item.id !== productId));
  }

  _checkout(): void {
    console.log('Checkout with items:', this.cart());
    // Reset cart after checkout
    this.cart.set([]);
  }
}

This feature significantly improves the UX for copy-based drag-and-drop interactions, making it clear that items remain in their original location.

2. Material Chips Edit Icon - material - PR

adds an optional edit icon to Material Design chips using the matChipEdit directive. This makes editable chips much more discoverable and user-friendly.

Before: Users had to double-click or focus+Enter to edit chips - not very discoverable.

After: Clear visual edit button shows that chips are editable and provides direct interaction.

// Before: Only double-click editing (hidden functionality)
<mat-chip-row [editable]="true">{{ tag.name }}</mat-chip-row>

// After: Visible edit button (discoverable functionality)
<mat-chip-row [editable]="true">
  <button matChipEdit>
    <mat-icon>edit</mat-icon>
  </button>
  {{ tag.name }}
</mat-chip-row>

🔍 Experimental Signal & Effects Graph in DevTools

Angular 20.1 introduces live signal dependency visualization right in your browser! This experimental feature lets you see your reactive signal graph in real-time as your app runs.

🎯 How to Enable:

1. Open Angular DevTools

2. Click the gear icon ⚙️

3. Toggle "Enable Signals & Effects Graph"

👀 What You'll See:

Each signal and effect appears as a labeled box showing:

• Name and current value

• Dependency arrows connecting related signals

• Color coding by type:

  • 🔵 Regular signals (blue)

  • 🟢 Computed signals (green)

  • 🔴 Linked signals (red)

  • ⚫ Effects (dark gray)

// Now you can visually see this dependency chain:
const count = signal(0);                    // 🔵 Blue box
const doubled = computed(() => count() * 2); // 🟢 Green box (arrow from count)
const effect = effect(() => {               // ⚫ Gray box (arrow from doubled)
  console.log('Doubled:', doubled());
});

Check this video from Igor Sedov.

Thanks for reading so far 🙏

I’d like to have your feedback so please leave a comment, clap or follow. 👏

Spread the Angular love! 💜

If you really liked it, share it among your community, tech bros and whoever you want! 🚀👥

Don't forget to follow me and stay updated: 📱

• 🔗 LinkedIn

• 📝 Medium

• 🎥 YouTube

• 🐦 Twitter

Thanks for being part of this Angular journey! 👋😁

🔥 @angular/core

1. New features for Dynamically-Created Components (#60137)

• Input binding

• Support listening to outputs

• Two-way bindings

• Ability to apply directives

import {createComponent, signal, inputBinding, outputBinding} from '@angular/core';

const canClose = signal(false);

// Create MyDialog
createComponent(MyDialog, {
  bindings: [
    // Bind a signal to the `canClose` input.
    inputBinding('canClose', canClose),

    // Listen for the `onClose` event specifically on the dialog.
    outputBinding<Result>('onClose', result => console.log(result)),
  ],
  directives: [
    // Apply the `FocusTrap` directive to `MyDialog` without any bindings.
    FocusTrap,

    // Apply the `HasColor` directive to `MyDialog` and bind the `red` value to its `color` input.
    // The callback to `inputBinding` is invoked on each change detection.
    {
      type: HasColor,
      bindings: [inputBinding('color', () => 'red')]
    }
  ]
});

2. Enhanced Error Handling: provideBrowserGlobalErrorListeners() (#60704)

Previously, certain types of errors could slip through Angular's error handling system:

• Zone.js applications: errors occurring outside the Angular Zone wouldn't be caught by the framework

• Zoneless applications: uncaught errors not explicitly handled by the framework could go unnoticed

• Promise rejections: unhandled promise rejections at the window level weren't forwarded to your error handler

These "escaped" errors would only appear in the browser console, making them harder to track and debug in production applications.

How It Works

The new provider installs global event listeners on the browser window for two critical error events:

• unhandledrejection - Catches unhandled promise rejections

• error - Catches uncaught JavaScript errors

When these events occur, they're automatically forwarded to your application's ErrorHandler, ensuring consistent error reporting across your entire application.

Implementation

Adding global error handling to your application is straightforward:

import { bootstrapApplication } from '@angular/platform-browser';
import { provideBrowserGlobalErrorListeners } from '@angular/core';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideBrowserGlobalErrorListeners(),
    // ... other providers
  ]
});

3. TypeScript versions less than 5.8 are no longer supported. (#60197)

4. New TestBed.tick() method (#60993)

The TestBed.tick() method is designed to mirror the behaviour of ApplicationRef.tick() in your unit tests. It synchronises the application state with the DOM, ensuring that all pending changes are processed and reflected in your test environment.

Previously, Angular testing relied on TestBed.flushEffects() to handle pending effects in tests. However, this method had limitations:

• Limited scope: only handled impacts, not the complete synchronisation cycle

• Inconsistent behaviour: didn't match the production application's synchronisation logic

• Confusing naming: the method name didn't indicate its broader impact on the test state

/ Before (Angular 19 and earlier)
TestBed.flushEffects(); // Only flushes effects
fixture.detectChanges(); // Separate step for change detection

// After (Angular 20)
TestBed.tick(); // Handles effects, change detection, and DOM sync

⚠️ BREAKING CHANGE: TestBed.flushEffects() has been removed in Angular 20. All existing usages must be updated to use TestBed.tick().

5. New Stable APIs

• toObservable()

• effect()

• linkedSignal()

• toSignal()

• incremental hydration api

• withI18nSupport()

  • Enables support for hydrating i18n blocks

• afterRender() ➜ renamed to afterEveryRender() ⚠️

  • Learn more about afterEveryRender() here

6. Enhanced Change Detection Debugging: provideCheckNoChangesConfig() (#60906)

This provider helps developers catch subtle bugs related to change detection by periodically verifying that no expressions have changed after they were checked. It's particularly valuable for:

• Zoneless applications: ensuring state changes are properly detected

• OnPush component debugging: surfacing hidden errors in optimised components

• Unidirectional data flow validation: catching side effects that violate Angular's change detection model

// Before (Angular 19 - Experimental)
import { provideExperimentalCheckNoChangesForDebug } from '@angular/core';

// After (Angular 20 - Developer Preview)
import { provideCheckNoChangesConfig } from '@angular/core';

// Exhaustive checking (recommended for thorough debugging)
provideCheckNoChangesConfig({
  exhaustive: true,
  interval: 1000  // Check every second
})

// Non-exhaustive checking (lighter performance impact)
provideCheckNoChangesConfig({
  exhaustive: false
})

The useNgZoneOnStable option has been removed as it wasn't found to be generally more helpful than the interval approach:

// ❌ No longer available in Angular 20
provideExperimentalCheckNoChangesForDebug({
  useNgZoneOnStable: true  // This option is removed
})

// ✅ Use interval-based checking instead
provideCheckNoChangesConfig({
  exhaustive: true,
  interval: 1000
})

Understanding the Configuration Options

Non-Exhaustive Mode (exhaustive: false)

provideCheckNoChangesConfig({ exhaustive: false })

• Behaviour: only checks components marked for change detection

• Performance: lighter impact, similar to production behaviour

• Use case: general debugging without deep inspection of OnPush components

Exhaustive Mode (exhaustive: true)

provideCheckNoChangesConfig({ 
  exhaustive: true,
  interval: 2000  // Optional: periodic checking
})

• Behaviour: Treats ALL components as if they use ChangeDetectionStrategy.Default

• Coverage: Checks all views attached to ApplicationRef and their descendants

• Benefits: Surfaces errors hidden by OnPush optimisation

• Use case: Thorough debugging, especially for OnPush component issues

Practical Usage Examples

Basic Setup for Zoneless Applications

import { bootstrapApplication } from '@angular/platform-browser';
import { provideCheckNoChangesConfig } from '@angular/core';

bootstrapApplication(AppComponent, {
  providers: [
    provideCheckNoChangesConfig({
      exhaustive: true,
      interval: 5000  // Check every 5 seconds
    }),
    // ... other providers
  ]
});

Debugging OnPush Component Issues

@Component({
  selector: 'app-problematic',
  template: `<div>{{ computedValue }}</div>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProblematicComponent {
  private _counter = 0;
  
  get computedValue() {
    // ⚠️ This violates unidirectional data flow
    return ++this._counter;
  }
}

// Configuration to catch this issue
provideCheckNoChangesConfig({
  exhaustive: true  // Will detect the violation in OnPush components
})

Development vs Production Configuration

// app.config.ts
import { isDevMode } from '@angular/core';

export const appConfig: ApplicationConfig = {
  providers: [
    // Only enable in development
    ...(isDevMode() ? [
      provideCheckNoChangesConfig({
        exhaustive: true,
        interval: 3000
      })
    ] : []),
    // ... other providers
  ]
};

7. DOCUMENT Token Moves to Core (#60663)

Previously, the DOCUMENT token was located in @angular/common, which created several issues:

• Unnecessary dependency: applications needed to install @angular/common to access the document

• SSR complications: Server-side rendering scenarios often only need document access without the full common package

• Architectural inconsistency: a fundamental browser API token was placed in a package focused on common directives and pipes

The DOCUMENT token now lives in @angular/core where it belongs, alongside other fundamental injection tokens and platform abstractions.

// Before (Angular 19 and earlier)
import { DOCUMENT } from '@angular/common';
import { inject } from '@angular/core';

// After (Angular 20 - recommended)
import { DOCUMENT, inject } from '@angular/core';

8. Zoneless Change Detection: From Experimental to Developer Preview (#60748)

bootstrapApplication(AppComponent, {
  providers: [
    provideZonelessChangeDetection(),
    // ... other providers
  ]
});

9. InjectFlags Removal (#60318)

InjectFlags controlled how and where Angular's dependency injection system would search for dependencies. They were essentially configuration options that modified the injection behaviour.

// Only search up to the host component
const service = inject(MyService, InjectFlags.Host);

Angular 20 removes the deprecated InjectFlags enum, completing the transition to a more modern, type-safe dependency injection API using object literals.

// ❌ No longer available in Angular 20
import { inject, InjectFlags } from '@angular/core';

// Before (deprecated approach)
const service = inject(MyService, InjectFlags.Optional | InjectFlags.Host);

// ✅ Modern approach (Angular 20)
import { inject } from '@angular/core';

const service = inject(MyService, { optional: true, host: true });

Affected APIs

All public injection APIs no longer accept InjectFlags:

• inject() function

• Injector.get() method

• EnvironmentInjector.get() method

• TestBed.get() method

• TestBed.inject() method

10. Complete Removal of TestBed.get() (#60414)

// TestBed.get() - Not type safe
const service = TestBed.get(MyService); // Returns 'any'
service.someMethod(); // No TypeScript checking, runtime errors possible

// TestBed.inject() - Fully type safe
const service = TestBed.inject(MyService); // Returns MyService
service.someMethod(); // TypeScript validates this exists

11. Task Management Made Stable: PendingTasks Injectable (#60716)

PendingTasks is an Angular service that allows you to track ongoing asynchronous operations in your application. It's particularly valuable for:

• Server-Side Rendering: Ensuring all async operations complete before serialization

• Testing: Waiting for all pending operations to finish

• Application State Management: Tracking when your app is "idle"

• Performance Monitoring: Understanding async operation lifecycle

What's Now Stable

import { PendingTasks } from '@angular/core';

@Component({...})
export class MyComponent {
  private pendingTasks = inject(PendingTasks);
  
  // ✅ Stable API
  trackAsyncOperation() {
    const removeTask = this.pendingTasks.add();
    
    this.performAsyncWork().finally(() => {
      removeTask(); // Clean up when done
    });
  }
}

What Remains in Developer Preview

// ⚠️ Still in developer preview
this.pendingTasks.run(async () => {
  // Async work here
  await this.performAsyncWork();
});

The run() method remains in developer preview due to ongoing questions about:

• Return value handling

• Error handling strategies

• Potential replacement with a more context-aware task API

12. Node.js Version Support Update (#60545)

Angular 20 updates its Node.js version requirements, dropping support for Node.js v18 (which reaches End-of-Life in April 2025) and establishing new minimum version requirements to ensure developers benefit from the latest Node.js features, security updates, and performance improvements.

// Angular 20
{
  "engines": {
    "node": "^20.11.1 || >=22.11.0"
  }
}

⚠️ You must check that your pipelines (CI/CD) work correctly with the new Node.js version.

# Install and use Node.js v20 LTS
nvm install 20
nvm use 20

# Or install Node.js v22 LTS
nvm install 22
nvm use 22

# Verify version
node --version

// package.json
{
  "name": "my-angular-app",
  "engines": {
    "node": ">=20.11.1",
    "npm": ">=10.0.0"
  }
}

13. Deprecate the ngIf/ngFor/ngSwitch structural directives (#60492)

// ❌ Deprecated in Angular 20, removal planned for Angular 22
*ngIf
*ngFor  
*ngSwitch, *ngSwitchCase, *ngSwitchDefault

// ✅ Recommended: Control Flow Blocks
@if
@for
@switch, @case, @default

14. DOM Optimization: ng-reflect Attributes Removed by Default (#60973)

ng-reflect-* attributes were originally introduced as a debugging aid to help developers understand what values Angular was binding to component properties and directives. They appeared in the DOM during development to show the current state of data bindings.

<!-- Example of ng-reflect attributes (old behavior) -->
<div my-directive [someProperty]="currentValue">
  <!-- Angular would add: -->
  <!-- ng-reflect-some-property="current-value" -->
</div>

<ng-template [ngIf]="showContent">
  <!-- Angular would add: -->
  <!-- bindings={ "ng-reflect-ng-if": "true" } -->
</ng-template>

<!-- Before: Complex components created verbose DOM -->
<my-component 
  [data]="complexObject"
  [config]="configuration"
  [options]="userOptions">
  
  <!-- Multiple ng-reflect attributes made DOM hard to read -->
  <!-- ng-reflect-data="[object Object]" -->
  <!-- ng-reflect-config="[object Object]" -->
  <!-- ng-reflect-options="[object Object]" -->
</my-component>

<!-- After: Clean, readable DOM -->
<my-component 
  [data]="complexObject"
  [config]="configuration"
  [options]="userOptions">
  <!-- Clean HTML for better developer experience -->
</my-component>

If you want to restore the behaviour use provideNgReflectAttributes():

// To restore ng-reflect behavior (development only)
import { bootstrapApplication } from '@angular/platform-browser';
import { provideNgReflectAttributes } from '@angular/core';

bootstrapApplication(AppComponent, {
  providers: [
    provideNgReflectAttributes(), // Enables ng-reflect in dev mode
    // ... other providers
  ]
});

15. Chrome DevTools Performance Integration (#60789)

Angular 20 adds the ng.enableProfiling() global utility that exposes Angular's internal performance data to Chrome DevTools, creating a dedicated Angular track in the Performance timeline alongside other browser metrics.

Unified Performance Analysis

• Single Tool: No more switching between Angular DevTools and Chrome DevTools

• Correlated Data: See Angular events in context with other browser performance metrics

• Production Debugging: Works with minified production code

Angular-Specific Insights

• Component rendering lifecycle

• Change detection cycles

• Event listener execution

• Component instantiation

• Provider instantiation

• Dependency injection profiling

Visual Indicators

• Color-coded entries to distinguish between:

  • Developer-authored TypeScript code

  • Angular compiler-generated code

• Dedicated Angular track at the bottom of the performance timeline

🔥 @angular/common

1. NgTemplateOutlet Accepts Undefined Inputs (#61404)

Angular 20 improves the NgTemplateOutlet directive by accepting undefined inputs alongside null, addressing a long-standing TypeScript compatibility issue and making the directive more ergonomic to use with modern Angular patterns like signals and ViewChild.

// Before (Angular 19 and earlier)
export class NgTemplateOutlet<C = unknown> {
  @Input() ngTemplateOutlet: TemplateRef<C> | null = null;
  @Input() ngTemplateOutletContext: C | null = null;
  @Input() ngTemplateOutletInjector: Injector | null = null;
}

// After (Angular 20)
export class NgTemplateOutlet<C = unknown> {
  @Input() ngTemplateOutlet: TemplateRef<C> | null | undefined = null;
  @Input() ngTemplateOutletContext: C | null | undefined = null;
  @Input() ngTemplateOutletInjector: Injector | null | undefined = null;
}

// undefined: represents non-existence, state of being unset
let template: TemplateRef | undefined; // Not initialized
if (template) { /* use template */ } // Natural check

// null: represents an explicit value of "nothingness"
let template: TemplateRef | null = null; // Explicitly set to null
if (template !== null) { /* use template */ } // Explicit null check needed

// Before: Required nullish coalescing or type assertion
@Component({
  template: `
    <ng-template #myTemplate>Content</ng-template>
    <ng-container [ngTemplateOutlet]="template ?? null"></ng-container>
  `
})
export class MyComponent {
  @ViewChild('myTemplate') template?: TemplateRef<any>;
  
  // Had to use ?? null to satisfy type checker
  get templateOrNull() {
    return this.template ?? null;
  }
}

// After: Direct usage without type gymnastics
@Component({
  template: `
    <ng-template #myTemplate>Content</ng-template>
    <ng-container [ngTemplateOutlet]="template"></ng-container>
  `
})
export class MyComponent {
  @ViewChild('myTemplate') template?: TemplateRef<any>;
  
  // Works directly - no type conversion needed!
}

2. ViewportScroller with ScrollOptions Support (#61002)

// Before (Angular 19 and earlier)
abstract class ViewportScroller {
  abstract scrollToPosition(position: [number, number]): void;
  abstract scrollToAnchor(anchor: string): void;
}

// After (Angular 20)
abstract class ViewportScroller {
  abstract scrollToPosition(position: [number, number], options?: ScrollOptions): void;
  abstract scrollToAnchor(anchor: string, options?: ScrollOptions): void;
}

ScrollOptions Interface

interface ScrollOptions {
  behavior?: 'auto' | 'instant' | 'smooth';
  block?: 'start' | 'center' | 'end' | 'nearest';
  inline?: 'start' | 'center' | 'end' | 'nearest';
}

@Component({
  selector: 'app-landing-page',
  template: `
    <nav class="fixed-header">
      <a (click)="navigateToSection('hero')">Home</a>
      <a (click)="navigateToSection('about')">About</a>
      <a (click)="navigateToSection('services')">Services</a>
      <a (click)="navigateToSection('contact')">Contact</a>
    </nav>

    <section id="hero" class="hero-section">...</section>
    <section id="about" class="about-section">...</section>
    <section id="services" class="services-section">...</section>
    <section id="contact" class="contact-section">...</section>
  `
})
export class LandingPageComponent {
  private viewportScroller = inject(ViewportScroller);

  navigateToSection(sectionId: string) {
    this.viewportScroller.scrollToAnchor(sectionId, {
      behavior: 'smooth',
      block: 'start' // Align to top of viewport
    });
  }
}

3. Suspicious Date Pattern Validation (#59798)

Angular 20 introduces runtime validation for date formatting patterns in development mode, helping developers catch common mistakes that lead to incorrect date displays. This enhancement specifically targets the misuse of week-based year patterns that cause subtle but critical date formatting errors.

Common Mistake: Y vs y

// ❌ WRONG: Using week-based year (Y) instead of calendar year (y)
formatDate(new Date('2024-12-31'), 'YYYY-MM-dd', 'en');
// Returns: "2025-12-31" (INCORRECT!)

// ✅ CORRECT: Using calendar year (y)
formatDate(new Date('2024-12-31'), 'yyyy-MM-dd', 'en');
// Returns: "2024-12-31" (CORRECT!)

Why This Happens

Week-based year (Y) differs from calendar year (y) for a few days around January 1st:

// Week-based year examples (using Y)
formatDate('2024-01-01', 'YYYY', 'en'); // Returns "2024" ✓
formatDate('2024-12-30', 'YYYY', 'en'); // Returns "2025" ❌ Wrong!
formatDate('2024-12-31', 'YYYY', 'en'); // Returns "2025" ❌ Wrong!

// Calendar year examples (using y)
formatDate('2024-01-01', 'yyyy', 'en'); // Returns "2024" ✓
formatDate('2024-12-30', 'yyyy', 'en'); // Returns "2024" ✓
formatDate('2024-12-31', 'yyyy', 'en'); // Returns "2024" ✓

Development Mode Error Detection

// Angular 20 now throws errors for suspicious patterns in development
import { formatDate } from '@angular/common';

// ❌ This will throw an error in development mode
try {
  formatDate(new Date(), 'YYYY/MM/dd', 'en');
} catch (error) {
  console.error(error.message);
  // "Suspicious use of week-based year "Y" in date pattern "YYYY/MM/dd". 
  //  Did you mean to use calendar year "y" instead?"
}

// ✅ This works correctly
formatDate(new Date(), 'yyyy/MM/dd', 'en'); // No error

When Validation Triggers

Angular validates patterns and throws errors for:

1. Week-based year without week indicator: Using Y without w

2. Mixed date components: Using day-of-year D with month M

// ❌ Will throw error - week-based year without week
formatDate(date, 'YYYY-MM-dd', 'en');

// ✅ Valid - week-based year WITH week indicator
formatDate(date, `YYYY 'W'ww`, 'en'); // "2024 W52"

// ✅ Valid - calendar year (most common use case)
formatDate(date, 'yyyy-MM-dd', 'en'); // "2024-12-31"

Practical Example

@Component({
  selector: 'app-date-display',
  template: `
    <div class="date-info">
      <!-- ❌ Before: Potential bug with Y -->
      <!-- <p>Date: {{ currentDate | date:'YYYY-MM-dd' }}</p> -->
      
      <!-- ✅ After: Correct calendar year -->
      <p>Date: {{ currentDate | date:'yyyy-MM-dd' }}</p>
      
      <!-- ✅ Valid: Week-based year with week -->
      <p>Week: {{ currentDate | date:`YYYY 'W'ww` }}</p>
    </div>
  `
})
export class DateDisplayComponent {
  currentDate = new Date();
  
  // ❌ This method would throw in development
  // getFormattedDate() {
  //   return formatDate(this.currentDate, 'YYYY-MM-dd', 'en');
  // }
  
  // ✅ Correct implementation
  getFormattedDate() {
    return formatDate(this.currentDate, 'yyyy-MM-dd', 'en');
  }
}

🔥 @angular/compiler

1. @for Track Function Diagnostics (#60495)

Angular 20 introduces a new extended diagnostic that warns developers when track functions in @for loops are not properly invoked. This compile-time validation helps prevent performance issues when track functions are referenced but not called, causing unnecessary DOM recreation.

@Component({
  template: `
    <!-- ❌ WRONG: Track function not invoked -->
    @for (item of items; track trackByName) {
      <div>{{ item.name }}</div>
    }
  `
})
export class ListComponent {
  items = [{ name: 'Alice' }, { name: 'Bob' }];
  
  trackByName(item: any) {
    return item.name; // This function is never called!
  }
}

Compile-Time Warning

// Angular 20 now shows a warning during compilation:
// Error: The track function in the @for block should be invoked: trackByName(/* arguments */)

@Component({
  template: `
    <!-- ❌ This triggers the diagnostic -->
    @for (item of items; track trackByName) {
      <div>{{ item.name }}</div>
    }
  `
})
export class DiagnosticExample {
  trackByName(item: any) {
    return item.name;
  }
}

// Error Code: 8115 - UNINVOKED_TRACK_FUNCTION
// Extended Diagnostic Name: uninvokedTrackFunction
// Category: Warning
// Message: "The track function in the @for block should be invoked: trackByName(/* arguments */)"

2. Void and Exponentiation Operators Support in Templates (#59894)

When a method returns false in an event handler, it can unintentionally prevent the default event behavior (similar to calling preventDefault()). The void operator ensures the expression always returns undefined, avoiding this issue.

Examples:

In Host Bindings:

@Directive({
  selector: '[trackClicks]',
  host: { 
    '(mousedown)': 'void handleMousedown($event)',
    '(click)': 'void logClick($event)'
  }
})
export class ClickTrackerDirective {
  handleMousedown(event: MouseEvent) {
    console.log('Mouse down tracked');
    return false; // Won't prevent default behavior due to void
  }
  
  logClick(event: MouseEvent) {
    console.log('Click tracked');
    // Any return value is ignored
  }
}

In Template Event Bindings:

@Component({
  template: `
    <button (click)="void saveData()">Save</button>
    <form (submit)="void handleSubmit($event)">
      <!-- form content -->
    </form>
  `
})
export class MyComponent {
  saveData() {
    // Save logic here
    return false; // Won't affect event propagation
  }
  
  handleSubmit(event: Event) {
    // Handle form submission
    console.log('Form submitted');
  }
}

Angular 20 adds support for the exponentiation operator (**) in template expressions, bringing mathematical operations in templates closer to standard JavaScript.

Examples:

Basic Mathematical Calculations:

@Component({
  template: `
    <div>
      <p>2 to the power of 3: {{2 ** 3}}</p>
      <p>Base squared: {{base ** 2}}</p>
      <p>Scientific notation: {{10 ** -3}}</p>
      <p>Complex calculation: {{(value + 1) ** exponent}}</p>
    </div>
  `
})
export class MathComponent {
  base = 5;
  value = 4;
  exponent = 3;
}

3. Tagged Template Literals Support (#59947)

Tagged template literals allow you to parse template literals with a function. The tag function receives the string parts and interpolated values separately, giving you complete control over how the final string is constructed.

@Component({
  template: `
    <div>No interpolations: {{ tag\`hello world\` }}</div>
    <span>With interpolations: {{ greet\`Hello \${name}, it's \${timeOfDay}!\` }}</span>
    <p>With pipe: {{ format\`Welcome \${username}\` | uppercase }}</p>
  `
})
export class MyComponent {
  name = 'Alice';
  timeOfDay = 'morning';
  username = 'developer';

  // Simple tag function
  tag = (strings: TemplateStringsArray, ...args: any[]) => {
    return strings.join('') + ' (processed)';
  };

  // Tag function with interpolation processing
  greet = (strings: TemplateStringsArray, name: string, time: string) => {
    return `${strings[0]}${name.toUpperCase()}${strings[1]}${time}${strings[2]}`;
  };

  // Formatting tag function
  format = (strings: TemplateStringsArray, ...args: string[]) => {
    return strings.reduce((result, string, i) => {
      return result + string + (args[i] ? `**${args[i]}**` : '');
    }, '');
  };
}

4. Support the in keyword in Binary expression (#58432)

The in operator returns true if a specified property exists in an object or its prototype chain. It's a fundamental JavaScript operator that's now available in Angular templates with full type safety.

@Component({
  template: `
    <div>{{ 'name' in user ? 'Has name' : 'No name' }}</div>
    <div>{{ 'email' in user ? user.email : 'No email provided' }}</div>
    <div>{{ 'admin' in permissions ? 'Admin user' : 'Regular user' }}</div>
  `
})
export class UserProfileComponent {
  user = {
    name: 'Alice',
    email: 'alice@example.com'
  };
  
  permissions = {
    read: true,
    write: true,
    admin: false
  };
}

🔥 @angular/compiler-cli

1. Enhanced Template Expression Diagnostics: Unparenthesized Nullish Coalescing (#60279)

Angular 20 introduces a new extended diagnostic (NG8114) that helps developers write more robust template expressions by detecting potentially ambiguous operator precedence when mixing nullish coalescing (??) with logical operators (&& and ||).

What is the Unparenthesized Nullish Coalescing Diagnostic?

This diagnostic identifies cases where the nullish coalescing operator (??) is used alongside logical AND (&&) or logical OR (||) operators without parentheses to clarify precedence. This pattern can lead to confusion and unexpected behavior, as the operator precedence may not be immediately obvious to developers.

Why This Matters

In JavaScript and TypeScript, mixing these operators without parentheses is considered an error because it creates ambiguous expressions. Angular templates have historically allowed this pattern, but it can lead to bugs and maintenance issues.

@Component({
  template: `
    <!-- Ambiguous: Is it (hasPermission() && task()?.disabled) ?? true 
         or hasPermission() && (task()?.disabled ?? true)? -->
    <button [disabled]="hasPermission() && task()?.disabled ?? true">
      Run Task
    </button>
    
    <!-- Another ambiguous case -->
    <div>{{ name || user?.name ?? 'Anonymous' }}</div>
  `
})
export class ProblematicComponent {
  hasPermission = input(false);
  task = input<Task | undefined>(undefined);
  name = '';
  user = input<User | null>(null);
}

The Solution: Clear Parentheses

Always use parentheses to explicitly define the intended order of operations:

@Component({
  template: `
    <!-- ❌ Ambiguous precedence -->
    <div class="error" *ngIf="form.invalid && field.touched ?? showAllErrors">
      Field is required
    </div>
    
    <!-- ✅ Clear intent: Show error if form invalid AND (field touched OR show all) -->
    <div class="error" *ngIf="form.invalid && (field.touched ?? showAllErrors)">
      Field is required
    </div>
    
    <!-- ✅ Alternative: Show error if (form invalid AND field touched) OR show all -->
    <div class="error" *ngIf="(form.invalid && field.touched) ?? showAllErrors">
      Field is required (alternative logic)
    </div>
  `
})
export class FormValidationComponent {
  form = inject(FormBuilder).group({
    field: ['', Validators.required]
  });
  
  get field() { return this.form.get('field')!; }
  showAllErrors = signal(false);
}

2. Enhanced Template Diagnostics: Missing Structural Directive Detection (#59443)

Angular 20 introduces a new extended diagnostic (NG8116) that helps developers identify missing imports for custom structural directives in standalone components. This diagnostic prevents runtime errors and improves the developer experience when working with custom structural directives.

What is the Missing Structural Directive Diagnostic?

This diagnostic detects when a standalone component uses custom structural directives (like *select, *featureFlag, or *permission) in its template without importing the corresponding directive. This helps catch import oversights that would otherwise cause runtime failures.

@Component({
  // ✅ Proper imports for custom structural directives
  imports: [SelectDirective, FeatureFlagDirective],
  template: `
    <div *select="let item from items">
      {{ item.name }}
    </div>
    
    <section *featureFlag="'newDashboard'">
      <new-dashboard />
    </section>
  `
})
export class MyComponent {
  items = [{ name: 'Item 1' }, { name: 'Item 2' }];
}

3. Enhanced Type Checking for Host Bindings (#60267)

Previously, Angular's type checking was limited to component templates. Now, host bindings in directives and components receive full type checking support, including:

• Host object literals in @Component and @Directive decorators

• @HostBinding decorator expressions

• @HostListener decorator expressions

• IDE integration with hover information, autocomplete, and renaming support

This feature is controlled by the typeCheckHostBindings compiler flag (this will be enabled by default in Angular 21):

{
  "angularCompilerOptions": {
    "strictTemplates": true,
    "typeCheckHostBindings": true
  }
}

🔥 @angular/forms

1. Enhanced Form Control Management: markAllAsDirty Method (#58663)

The markAllAsDirty method recursively marks a form control and all of its child controls as dirty. This is particularly useful when you need to trigger validation display for an entire form or form section at once.

import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  template: `
    <input [formControl]="emailControl" placeholder="Email">
    <div *ngIf="emailControl.dirty && emailControl.invalid" class="error">
      Email is required and must be valid
    </div>
    <button (click)="markDirty()">Mark as Dirty</button>
    <button (click)="reset()">Reset</button>
    
    <div class="status">
      <p>Dirty: {{ emailControl.dirty }}</p>
      <p>Valid: {{ emailControl.valid }}</p>
    </div>
  `
})
export class FormControlExample {
  emailControl = new FormControl('', [
    Validators.required,
    Validators.email
  ]);
  
  markDirty(): void {
    this.emailControl.markAllAsDirty();
  }
  
  reset(): void {
    this.emailControl.reset();
  }
}

Comparison with Existing Methods:

2. Enhanced Form Reset Controls: Silent Reset Option (#60354)

The resetForm method in FormGroupDirective now accepts an optional parameter that gets passed to the underlying FormGroup.reset() method, allowing you to control event emission during reset operations.

The Problem

Previously, resetting a form would always trigger change events, which could cause unwanted side effects:

@Component({
  template: `
    <form #formDir="ngForm" [formGroup]="userForm">
      <input formControlName="name" placeholder="Name">
      <input formControlName="email" placeholder="Email">
      <button type="submit">Submit</button>
      <button type="button" (click)="resetForm(formDir)">Reset</button>
    </form>
    
    <div class="debug">
      <p>Value changes count: {{ valueChangesCount }}</p>
      <p>Form submitted: {{ formDir.submitted }}</p>
    </div>
  `
})
export class ProblematicComponent {
  userForm: FormGroup;
  valueChangesCount = 0;
  
  constructor(private fb: FormBuilder) {
    this.userForm = this.fb.group({
      name: [''],
      email: ['']
    });
    
    // This subscription would fire unnecessarily during reset
    this.userForm.valueChanges.subscribe(() => {
      this.valueChangesCount++;
      // Expensive operations triggered on every change
      this.performExpensiveCalculation();
    });
  }
  
  resetForm(formDir: FormGroupDirective): void {
    // ❌ Old behavior: Always emits events
    formDir.resetForm();
    // This would increment valueChangesCount unnecessarily
  }
  
  private performExpensiveCalculation(): void {
    // Some expensive operation that shouldn't run during reset
    console.log('Expensive calculation triggered');
  }
}

The Solution

Now you can reset forms without triggering change events:

resetFormSilent(formDir: FormGroupDirective): void {
  // ✅ New behavior: Reset without emitting events
  formDir.resetForm(undefined, { emitEvent: false });
  // valueChangesCount won't increment
}

🔥 @angular/http

1. HTTP Client Keep-Alive Support for Fetch Requests (#60621)

The keepalive option, when set to true, instructs the browser to keep the request alive even if the page that initiated it is unloaded. This is particularly useful for sending final analytics data, logging events, or performing cleanup operations when users navigate away from or close a page.

Keep-alive support requires using the Fetch API backend. Make sure to configure your application with withFetch():

import { provideHttpClient, withFetch } from '@angular/common/http';

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(withFetch()), // Required for keepalive support
    // other providers...
  ]
});

Simple GET Request with Keep-Alive:

import { Component, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-analytics',
  template: `
    <button (click)="sendAnalytics()">Send Analytics</button>
    <button (click)="trackPageView()">Track Page View</button>
  `
})
export class AnalyticsComponent {
  private http = inject(HttpClient);
  
  sendAnalytics(): void {
    // This request will persist even if the page is unloaded
    this.http.get('/api/analytics/session-end', { 
      keepalive: true 
    }).subscribe({
      next: (response) => console.log('Analytics sent:', response),
      error: (error) => console.error('Analytics failed:', error)
    });
  }
  
  trackPageView(): void {
    const pageData = {
      url: window.location.href,
      timestamp: Date.now(),
      userAgent: navigator.userAgent
    };
    
    this.http.post('/api/analytics/pageview', pageData, {
      keepalive: true,
      headers: { 'Content-Type': 'application/json' }
    }).subscribe();
  }
}

🔥 @angular/platform-browser

1. Deprecate the platform-browser-dynamic package (#61043)

The @angular/platform-browser-dynamic package is now deprecated. All its functionality has been moved to @angular/platform-browser, providing a unified package for browser platform operations.

// ❌ Deprecated approach
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

// ✅ New recommended approach
import { platformBrowser } from '@angular/platform-browser';
import { AppModule } from './app/app.module';

platformBrowser()
  .bootstrapModule(AppModule)
  .catch(err => console.error(err));

2. Deprecate the HammerJS integration (#60257)

What's Being Deprecated

The following HammerJS-related APIs and providers are now deprecated:

• HammerGestureConfig

• HAMMER_GESTURE_CONFIG token

• HammerModule

• Built-in HammerJS gesture directives

• Automatic HammerJS gesture recognition

Why This Change?

1. Native Browser Support: Modern browsers provide comprehensive touch and gesture APIs

2. Bundle Size Reduction: Removing HammerJS dependency reduces application bundle size

3. Performance: Native browser events are more performant than library-based solutions

4. Maintenance: Reduces Angular's dependency on external libraries

🔥 @angular/platform-server

1. Platform Server Testing Entry Point Deprecation (#60915)

The following APIs from @angular/platform-server/testing are now deprecated:

• platformServerTesting

• ServerTestingModule

• All related testing utilities for server-side rendering

Why This Change?

1. Better Testing Practices: E2E tests provide more realistic SSR verification

2. Real Environment Testing: E2E tests run in actual browser/server environments

3. Simplified Maintenance: Reduces complexity in the platform-server package

4. More Accurate Results: Tests actual SSR behavior rather than mocked environments

// ❌ Deprecated approach
import { TestBed } from '@angular/core/testing';
import { platformServerTesting, ServerTestingModule } from '@angular/platform-server/testing';
import { AppComponent } from './app.component';

describe('AppComponent SSR', () => {
  beforeEach(() => {
    TestBed.initTestEnvironment(
      ServerTestingModule,
      platformServerTesting()
    );
    
    TestBed.configureTestingModule({
      declarations: [AppComponent]
    });
  });

  it('should render on server', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    expect(fixture.nativeElement.textContent).toContain('Hello');
  });
});

You can use Cypress, Playwright, Jest + Puppeteer and other configurations.

🔥 @angular/router

1. Add ability to directly abort a navigation (#60380)

The Navigation interface now includes an abort() method that allows you to cancel an ongoing navigation before it completes. This is particularly useful for scenarios where you need to cancel navigations based on user actions, external events, or application state changes.

// Aborting current navigation

import { Component, inject } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-navigation-control',
  template: `
    <div class="navigation-controls">
      <button (click)="startNavigation()">Start Navigation</button>
      <button (click)="abortNavigation()" [disabled]="!isNavigating">
        Abort Navigation
      </button>
      <p>Status: {{ navigationStatus }}</p>
    </div>
  `
})
export class NavigationControlComponent {
  private router = inject(Router);
  
  isNavigating = false;
  navigationStatus = 'Ready';
  
  async startNavigation(): Promise<void> {
    this.isNavigating = true;
    this.navigationStatus = 'Navigating...';
    
    try {
      const result = await this.router.navigate(['/slow-loading-page']);
      this.navigationStatus = result ? 'Navigation completed' : 'Navigation failed';
    } catch (error) {
      this.navigationStatus = 'Navigation error';
    } finally {
      this.isNavigating = false;
    }
  }
  
  abortNavigation(): void {
    const currentNavigation = this.router.getCurrentNavigation();
    if (currentNavigation) {
      currentNavigation.abort();
      this.navigationStatus = 'Navigation aborted';
      this.isNavigating = false;
    }
  }
}

2. Asynchronous Router Redirects (#60863)

The RedirectFunction type now supports returning MaybeAsync<string | UrlTree>, which means redirect functions can return:

• Synchronous values: string | UrlTree

• Promises: Promise<string | UrlTree>

• Observables: Observable<string | UrlTree>

// Synchronous Redirects (Existing)
const routes: Routes = [
  {
    path: 'old-page',
    redirectTo: '/new-page'  // Static redirect
  },
  {
    path: 'user/:id',
    redirectTo: (route) => `/profile/${route.params['id']}`  // Sync function
  }
];

// Asynchronous Redirects (New)
import { inject } from '@angular/core';
import { Routes } from '@angular/router';
import { UserService } from './user.service';

const routes: Routes = [
  {
    path: 'dashboard',
    redirectTo: async (route) => {
      const userService = inject(UserService);
      const user = await userService.getCurrentUser();
      
      if (user.isAdmin) {
        return '/admin/dashboard';
      } else {
        return '/user/dashboard';
      }
    }
  },
  {
    path: 'profile',
    redirectTo: (route) => {
      const userService = inject(UserService);
      
      // Return Observable
      return userService.getCurrentUser().pipe(
        map(user => user.isActive ? '/profile/active' : '/profile/inactive')
      );
    }
  }
];

3. Allow resolvers to read resolved data from ancestors (#59860)

Previously, resolvers could only access their own resolved data. Now, child resolvers can read resolved data from any ancestor route in the route tree, enabling better data composition and reducing redundant API calls.

// Example: Accessing Parent Resolver Data

import { ActivatedRouteSnapshot } from '@angular/router';
import { inject } from '@angular/core';

const routes: Routes = [
  {
    path: 'company/:id',
    resolve: {
      company: (route: ActivatedRouteSnapshot) => {
        const dataService = inject(DataService);
        return dataService.getCompany(route.params['id']);
      }
    },
    children: [
      {
        path: 'departments',
        resolve: {
          // Child resolver can access parent's resolved data
          departments: (route: ActivatedRouteSnapshot) => {
            const dataService = inject(DataService);
            const company = route.data['company']; // Access parent's resolved company data
            return dataService.getDepartments(company.id);
          }
        },
        component: DepartmentsComponent,
        children: [
          {
            path: ':deptId/employees',
            resolve: {
              // Grandchild resolver can access both parent and grandparent data
              employees: (route: ActivatedRouteSnapshot) => {
                const dataService = inject(DataService);
                const company = route.data['company'];      // From grandparent
                const departments = route.data['departments']; // From parent
                const deptId = route.params['deptId'];
                
                return dataService.getEmployees(company.id, deptId);
              }
            },
            component: EmployeesComponent
          }
        ]
      }
    ]
  }
];

4. Support custom elements for RouterLink (#60290)

When RouterLink is used on a registered custom element, Angular now checks if the custom element's observedAttributes static property includes 'href'. If it does, the element is treated as a navigational element similar to native <a> tags, with proper href updates and accessibility handling.

import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';

@Component({
  selector: 'app-navigation',
  standalone: true,
  imports: [RouterModule],
  template: `
    <nav class="custom-navigation">
      <h2>Custom Element Navigation</h2>
      
      <!-- Custom elements with RouterLink - href will be automatically managed -->
      <custom-link routerLink="/home" routerLinkActive="active">
        Home
      </custom-link>
      
      <custom-link routerLink="/products" routerLinkActive="active">
        Products
      </custom-link>
      
      <custom-link routerLink="/about" routerLinkActive="active">
        About
      </custom-link>
      
      <custom-link 
        routerLink="/contact" 
        routerLinkActive="active"
        [routerLinkActiveOptions]="{ exact: true }">
        Contact
      </custom-link>
      
      <!-- Disabled custom link -->
      <custom-link disabled>
        Coming Soon
      </custom-link>
      
      <!-- Custom link with query parameters -->
      <custom-link 
        routerLink="/search" 
        [queryParams]="{ q: 'angular', category: 'docs' }"
        routerLinkActive="active">
        Search Angular Docs
      </custom-link>
    </nav>
  `,
})
export class CustomNavigationComponent {}

🔥 @schematics/angular

1. Global Error Listeners for Better Error Handling (PR)

Previously, errors happening outside Angular's zone or in asynchronous operations might go unnoticed or crash your application silently. With this new provider, Angular automatically registers global error handlers to catch and manage these scenarios more gracefully.

The provider is now automatically included in new Angular applications generated through the CLI, ensuring better error handling.

// app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [
    // New global error listeners provider - catches unhandled errors
    provideBrowserGlobalErrorListeners(),
  ]
};

// app.ts
export class AppComponent {
  
  triggerAsyncError() {
    // This error would previously go unhandled
    setTimeout(() => {
      throw new Error('Async error caught by global listener!');
    }, 100);
  }
  
  triggerPromiseRejection() {
    // Unhandled promise rejection
    Promise.reject(new Error('Promise rejection caught by global listener!'));
  }
  
  triggerZoneError() {
    // Error outside Angular zone
    Zone.current.runOutsideAngular(() => {
      throw new Error('Zone error caught by global listener!');
    });
  }
}

2. Automatic TypeScript Module Resolution Migration (PR)

The CLI now automatically migrates existing projects to use TypeScript's 'bundler' module resolution instead of the older 'node' resolution. This change aligns with modern build tools and package managers, providing better support for ESM modules and contemporary JavaScript patterns.

The migration intelligently scans all TypeScript configuration files in your workspace and updates them appropriately, while respecting specific configurations like module: 'preserve'.

The migration is smart about when to apply changes:

• ✅ Updates moduleResolution: 'node' to moduleResolution: 'bundler'

• ❌ Skips files that already use 'bundler' resolution

• ❌ Preserves module: 'preserve' configurations unchanged

• 🔍 Scans all TypeScript configs in your workspace automatically

// BEFORE Migration - tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "node",  // ❌ Old resolution strategy
  }
}

// AFTER Migration - tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "bundler",  // ✅ Modern bundler resolution
  }
}

3. Server-Side Rendering API Modernization (PR)

Two major changes streamline SSR setup:

• Import Migration:

  • ✅ Moves provideServerRendering from @angular/platform-server to @angular/ssr

  • ✅ Preserves other platform-server imports

  • ✅ Merges with existing @angular/ssr imports

• API Consolidation:

  • ✅ Replaces provideServerRouting(routes) with provideServerRendering(withRoutes(routes))

  • ✅ Removes duplicate provideServerRendering() calls

  • ✅ Preserves additional arguments and configurations

// ❌ BEFORE - Angular 19 SSR Configuration
// Old location
import { provideServerRendering } from '@angular/platform-server'; 
// Separate provider 
import { provideServerRouting } from '@angular/ssr';  

export const serverConfig: ApplicationConfig = {
  providers: [
    provideServerRendering(),
    provideServerRouting(routes)  // Two separate calls
  ]
};

// ✅ AFTER - Angular 20 Unified SSR
// Single import
import { provideServerRendering, withRoutes } from '@angular/ssr';  

export const advancedServerConfig: ApplicationConfig = {
  providers: [
    provideServerRendering(
      withRoutes(routes),
      withAppShell(AppShellComponent),  // App shell for instant loading
      withPrerendering(['/home', '/about'])  // Static prerendering
    )
  ]
};

4. File Naming Style Guide Migration (PR)

Angular 20 introduces a new file naming style guide but automatically preserves your existing project's naming conventions when upgrading. The migration ensures backward compatibility while new projects adopt the modern naming standards.

// 📊 FILE NAMING COMPARISON TABLE

| Schematic Type | Angular 19 (Old) | Angular 20 (New) | Command Example |
|---------------|------------------|------------------|-----------------|
| Service       | user.service.ts  | user-service.ts  | ng g service user |
| Guard         | auth.guard.ts    | auth-guard.ts    | ng g guard auth |
| Interceptor   | data.interceptor.ts | data-interceptor.ts | ng g interceptor data |
| Module        | shared.module.ts | shared-module.ts | ng g module shared |
| Pipe          | custom.pipe.ts   | custom-pipe.ts   | ng g pipe custom |
| Resolver      | api.resolver.ts  | api-resolver.ts  | ng g resolver api |

// 🔧 MIGRATION CONFIGURATION
// angular.json - Added automatically during ng update to preserve old naming
{
  "schematics": {
    // Keep .component.ts
    "@schematics/angular:component": { "type": "component" },  
    // Keep .directive.ts     
    "@schematics/angular:directive": { "type": "directive" }, 
    // Keep .service.ts    
    "@schematics/angular:service": { "type": "service" }, 
    // Keep .guard.ts        
    "@schematics/angular:guard": { "typeSeparator": "." },  
    // Keep .interceptor.ts      
    "@schematics/angular:interceptor": { "typeSeparator": "." },  
    // Keep .module.ts
    "@schematics/angular:module": { "typeSeparator": "." },  
    // Keep .pipe.ts     
    "@schematics/angular:pipe": { "typeSeparator": "." },         
    // Keep .resolver.ts
    "@schematics/angular:resolver": { "typeSeparator": "." }      
  }
}

// 📂 PRACTICAL EXAMPLES

// 🔴 UPGRADED PROJECTS (with migration defaults):
ng generate service user-data       → user-data.service.ts
ng generate guard auth             → auth.guard.ts  
ng generate pipe currency-format  → currency-format.pipe.ts

// 🟢 NEW PROJECTS (Angular 20 defaults):
ng generate service user-data       → user-data-service.ts
ng generate guard auth             → auth-guard.ts
ng generate pipe currency-format  → currency-format-pipe.ts

// 🎯 COMPONENT STRUCTURE COMPARISON
ng generate component user-profile

// Upgraded projects:        // New projects:
user-profile/               user-profile/
├── user-profile.component.ts    ├── user-profile-component.ts
├── user-profile.component.html  ├── user-profile-component.html
├── user-profile.component.css   ├── user-profile-component.css
└── user-profile.component.spec.ts └── user-profile-component.spec.ts

// 🔄 MIGRATION BEHAVIOR
// ✅ Preserves existing settings if you already have custom configurations
// ✅ Only adds defaults for missing configurations
// ✅ Maintains your current project structure
// ✅ Zero breaking changes - all existing files remain unchanged

5. Modern Build System with @angular/build (PR)

📦 New Build Package: @angular/build replaces @angular-devkit/build-angular for new projects
⚡ Smaller Install Size: ~115 MB vs ~291 MB (60% reduction)
🚀 Faster Builds: No Webpack dependencies for modern esbuild-based builds
🔄 Backward Compatible: Existing projects can still use the old builder

6. TypeScript Project References for Better IDE Support (PR)

🔗 Project References: TypeScript configs now use composite projects and references
🧠 Better IDE Support: IDEs can accurately discover types across different project areas
📁 Solution Style: Root tsconfig.json becomes a TypeScript solution file
⚡ Zero Build Impact: Angular build process remains completely unaffected

The Key Insight

TypeScript project references were designed for vanilla TypeScript, not framework projects. Here's why:

🔍 Pure TypeScript: tsc --build works perfectly - it just compiles .ts to .js and .d.ts

🎭 Angular Reality: Needs template compilation, dependency injection metadata, AOT compilation, style processing, and bundling

Why Nx Exists

Nx realized this fundamental limitation years ago and built their own solution:

• 🎯 Dependency Graph: Manually tracks project relationships

• ⚡ Build Orchestration: Runs builds in the correct order

• 🎪 Framework Aware: Understands Angular's compilation needs

• 💾 Smart Caching: Avoids rebuilding unchanged projects

The Honest Truth

Angular 20's "project references" are marketing over substance. They give you:

• ✅ Better IDE experience

• ❌ Same build performance

• ❌ No incremental compilation

• ❌ No dependency-aware building

For real Angular monorepo performance, you still need Nx. TypeScript project references alone just aren't enough for framework projects! 🎯

Interesting PRs for Angular Project References:

• TypeScript 3 Project References feature support #37276

• Support TS Project References #59896

• feat(compiler-cli): support ts project references #59897

7. SSR Routing Simplification - No More Manual Configuration (PR)

Before Angular 20, developers had to understand the difference between "basic SSR" and "SSR with server routing."

Now it's simple: SSR means full SSR with everything enabled. One less decision, better defaults, happier developers! 🚀

# Update these commands:
# ❌ ng add @angular/ssr --server-routing
# ✅ ng add @angular/ssr

# ❌ ng generate app-shell --server-routing  
# ✅ ng generate app-shell

8. TypeScript Module Preserve for Modern Bundling (PR)

🔄 Module Preserve: New projects use "module": "preserve" instead of "module": "ES2022"
⚡ Auto-Enabled Options: Automatically sets esModuleInterop, moduleResolution: "bundler", and resolveJsonModule
🗑️ Cleaner Config: Removes redundant explicit options from tsconfig.json
📦 Better Bundler Compatibility: Matches modern bundler behavior exactly

// ❌ BEFORE - Angular 19 tsconfig.json
{
  "compilerOptions": {
    "esModuleInterop": true,        // ❌ Explicitly needed
    "moduleResolution": "bundler",  // ❌ Explicitly needed
    "module": "ES2022"              // ❌ Old module system
  }
}

// ✅ AFTER - Angular 20 tsconfig.json
{
  "compilerOptions": {
    // ✅ These are now automatically enabled by "preserve":
    // "esModuleInterop": true,
    // "moduleResolution": "bundler", 
    // "resolveJsonModule": true,
    "importHelpers": true,
    "target": "ES2022",
    "module": "preserve"            // ✅ Modern bundler-aware module system
  }
}

🔥 @angular/build

1. Experimental Vitest Unit Testing Support (PR1, PR2)

Angular 20 introduces experimental Vitest support as an alternative to Karma for unit testing, bringing modern testing capabilities with browser support and faster execution to Angular projects.

🧪 Experimental Vitest Builder: New @angular/build:unit-test builder with Vitest support
🌐 Browser Testing: Optional browser execution with Playwright or WebDriverIO
⚡ Faster Tests: Modern test runner with better performance than Karma
🔧 Build Target Integration: Leverages existing build configurations

// ❌ Not supported yet:
// - Watch mode  
// - Custom vitest configuration
// - Some Angular-specific testing features

// ✅ Supported:
// - Basic unit testing
// - Code coverage  
// - Browser testing
// - Angular TestBed integration

Here is a cool guide about implementing Vitest into NX monorepo by Younes Jaaidi.

2. Source Map Sources Content Control (PR)

Source maps are files that map the compiled/minified code back to the original source files, making debugging easier. By default, source maps include the actual content of the original source files (known as "sourcesContent"). This makes the source maps self-contained but can significantly increase their size.

The Angular team has added the ability to exclude the original source content from generated source maps through a new sourcesContent option. This applies to both JavaScript and CSS source maps.

// 🧭 WHAT ARE SOURCE MAPS?
// Think of them like a GPS for your code:
// 
// Your browser sees: `function a(b){return b+1}` (minified/ugly)
// Source map says: "This came from line 15 in user.service.ts: getUserAge(user)"
// DevTools shows: Your original, readable code!

// 🎯 THE NEW CHOICE: FULL GUIDE vs LIGHTWEIGHT GUIDE

// Option 1: Full Guide (sourcesContent: true) - DEFAULT
// ✅ Includes your original source code IN the source map file
// ✅ Works everywhere, even offline
// ❌ Source map files are 3x larger
// ❌ Your source code is exposed in production

// Option 2: Lightweight Guide (sourcesContent: false) - NEW!
// ✅ Source map files are 60% smaller
// ✅ Your source code stays private
// ❌ Debugging requires access to original files

// 📁 SIMPLE CONFIGURATION

// angular.json - Choose your approach
{
  "build": {
    "builder": "@angular/build:application",
    "options": {
      "sourceMap": {
        "scripts": true,
        "styles": true,
        "sourcesContent": false  // 🎯 NEW: Choose lightweight guide
      }
    },
    "configurations": {
      "development": {
        "sourceMap": {
          "sourcesContent": true   // 🛠️ FULL guide for debugging
        }
      },
      "production": {
        "sourceMap": {
          "sourcesContent": false  // 🚀 LIGHTWEIGHT guide for production
        }
      }
    }
  }
}

3. Smart Default Output Path - No More Configuration Needed (PR)

• The outputPath field is no longer required in Angular application configurations

• A default value dist/<project_name> is now used when outputPath is not specified

• Before this change, you had to explicitly specify the outputPath in your Angular project configuration (angular.json). Now, if you don't specify it, the build will automatically use dist/<project_name> relative to your workspace root.

4. Custom Package Resolution Conditions (PR)

Angular 20 adds a new conditions option that gives you fine-grained control over how npm packages are resolved, allowing you to specify exactly which version of a package to use when it offers multiple build outputs.

// Modern npm packages often ship multiple versions:
// package.json (example: lodash-es)
{
  "name": "lodash-es",
  "exports": {
    ".": {
      "node": "./node.js",        // For Node.js environments
      "browser": "./browser.js",  // For browsers
      "module": "./esm.js",       // Modern ES modules
      "import": "./esm.js",       // ES module imports
      "require": "./cjs.js",      // CommonJS requires
      "development": "./dev.js",  // Development builds
      "production": "./prod.js",  // Production builds (minified)
      "default": "./index.js"     // Fallback
    }
  }
}

// 🔧 ANGULAR 20 CONDITIONS CONFIGURATION

// angular.json - Control package resolution
{
  "build": {
    "builder": "@angular/build:application",
    "options": {
      "conditions": ["module", "browser", "production"]  // ✅ NEW: Custom conditions
    },
    "configurations": {
      "development": {
        "conditions": ["module", "browser", "development"]  // ✅ Dev-specific conditions
      },
      "production": {
        "conditions": ["module", "browser", "production"]   // ✅ Prod-specific conditions
      }
    }
  }
}

5. Sass Package Importers (PR)

Angular 20 adds support for Sass's new pkg: importers, making it easier to import Sass files from npm packages without messy path configurations or ~ prefixes.

Think of pkg: importers as a modern, clean way to import Sass from npm packages. Instead of dealing with complex paths and configurations, you can directly reference any npm package in your Sass files.

// Old way (still works):
@import '~@angular/material/theming';

// New way (recommended):
@use 'pkg:@angular/material' as mat;

🔥 @angular/ssr

1. Stabilize AngularNodeAppEngine, AngularAppEngine, and provideServerRouting APIs (PR)

These APIs enhance server-side rendering (SSR) capabilities in Angular applications, improving routing and server integration for better performance and reliability.

Breaking Changes Summary ⚠️

Deprecations Summary ⚠️

Style guide updates

Angular 20 introduces a new file naming convention but automatically preserves your existing project's style when upgrading.

Check the RFC.

If you want to check the modern Angular folder structure, you can read this post by Gerome Grignon. Gerome also created a library called ngx-boomer to update your angular.json to keep the previous behaviour.

Pioneering AI-First Development

Angular 20 marks a pivotal moment where framework evolution meets artificial intelligence, establishing Angular as the premier choice for developers building in the age of GenAI. The Angular team has recognized that the future of web development isn't just about better frameworks—it's about frameworks that work seamlessly with AI tools.

The AI Development Challenge

Modern developers face a unique paradox: while AI tools can dramatically accelerate development, they often generate outdated code patterns. Picture this scenario—you ask an AI assistant to create an Angular component, and it returns code using NgModules and *ngIf directives, patterns that were cutting-edge five years ago but are now legacy approaches. This disconnect between AI knowledge and current best practices creates friction in what should be a smooth development experience.

Angular's AI-First Strategy

1. The llms.txt Initiative: Teaching AI About Modern Angular

Angular has introduced a groundbreaking llms.txt file—consider it a curriculum designed specifically for large language models. This isn't just documentation; it's a carefully curated learning path that helps AI systems understand:

• Current syntax patterns: Control flow blocks (@if, @for, @switch) instead of structural directives

• Modern architecture: Standalone components over NgModule-based approaches

• Latest APIs: Signal-based reactivity and new lifecycle hooks

• Best practices: Contemporary file naming and organization standards

2. AI-Enhanced Development Guidelines

The second pillar of Angular's AI strategy focuses on empowering developers who are building AI-powered applications. This goes beyond fixing AI-generated code—it's about creating applications that leverage AI as a core feature.

A guide about AI in the Angular official docs.

Genkit Integration Patterns

Angular has pioneered integration patterns with Google's Genkit, creating templates for common AI use cases.

Another initiative is to start with AI experiences using modern Angular, which Hashbrown created.

Recently, Minko Gechev talked JSNation and showed a demo with an e-commerce and Gemini integration as AI using GenKit.

Here are the slides and the demo.

Angular Mascot

Check the RFC to vote for the favourite one. For me, it is the number 1.

Thanks for reading so far 🙏

I’d like to have your feedback, so please leave a comment, clap or follow. 👏

Spread the Angular love! 💜

If you liked it, share it among your community, tech bros and whoever you want! 🚀👥

Don't forget to follow me and stay updated: 📱

• 🔗 LinkedIn

• 📝 Medium

• 🎥 YouTube

• 🐦 Twitter

Thanks for being part of this Angular journey! 👋😁