Angular 21.2.21: what changed, what to do

Upgrade Angular 21.2.21 Now

Angular 21.2.21 delivers targeted fixes for rendering behavior and build stability. This patch release addresses specific issues without introducing new features or breaking changes, making it a low-risk upgrade for most projects.

The primary change resolves an NgIf evaluation bug. Previously, components using NgIf within a parent component configured with OnPush change detection could fail to update their visibility state correctly after certain input changes. This fix ensures that NgIf expressions re-evaluate as expected, preventing stale UI states. Applications with dynamic UIs, particularly those relying on complex conditional rendering logic, will find their components behave more predictably.

Another notable fix improves the Angular CLI’s build process. Version 21.2.21 corrects an issue where ng build could intermittently fail due to incorrect module resolution paths on Windows systems. This affected projects with specific dependency structures and could lead to unpredictable CI/CD pipeline failures. Teams deploying to Windows environments or using Windows-based CI/CD will experience more consistent and robust build outcomes.

Finally, a small optimization targets hydration performance for Angular Universal applications. This patch reduces the internal overhead during the hydration process by up to 8% in scenarios with deeply nested component trees. While not a dramatic improvement, it contributes to marginally faster time-to-interactive for server-side rendered applications, especially those with larger initial payloads.

To upgrade your project, execute the following command in your terminal:

ng update @angular/cli @angular/core

This patch release is a recommended upgrade. It contains critical bug fixes that directly improve application stability and developer experience, with no known regressions or breaking changes. Apply this update now to incorporate these improvements into your projects.

Meta Tag Security: What Changed

Angular 21.2.21 hardens security within platform-browser by enhancing how <meta> tags are sanitized. The DomSanitizer now explicitly removes event handler attributes from <meta> elements during rendering.

Previously, attributes like onerror or onload could be injected into <meta> tags if an application rendered untrusted input directly into these elements. While <meta> tags do not typically trigger script execution directly through event handlers in most modern browsers, the presence of such attributes in the DOM can still present an attack vector. This is particularly relevant in server-side rendered (SSR) applications, where the initial HTML might be constructed from dynamic or user-provided data, potentially leading to Cross-Site Scripting (XSS) vulnerabilities in specific browser or parsing contexts.

Consider an application that dynamically sets a meta tag’s content or attributes based on user input, perhaps from a query parameter or database entry:

<meta name="description" content="{{ userProvidedDescription }}" onerror="alert('XSS')">

Before this fix, an attacker injecting onerror="alert('XSS')" into userProvidedDescription could, in certain edge cases or less common browser environments, cause the script to execute. With Angular 21.2.21, platform-browser will strip onerror and similar event attributes from any <meta> tag, neutralizing this potential exploit.

This change primarily affects applications that dynamically generate or manipulate <meta> tags using data from untrusted sources. Developers who manually add event handlers to <meta> tags, though an uncommon practice, will also find these attributes removed. Most applications will see no functional difference, but gain a significant security improvement by closing this potential XSS vector.

Upgrade to Angular 21.2.21 now. This release includes a security patch that prevents a class of potential XSS vulnerabilities.

Meta Event Handlers: How to Fix

Angular 21.2.21 removes support for event handlers within <meta> tags. Attributes like onclick or onload on <meta> elements were previously implicitly handled by the DOM sanitizer, but this was an undocumented behavior that could introduce cross-site scripting (XSS) risks.

This change affects applications that have explicitly added event handler attributes to <meta> tags. This could be direct additions in index.html or programmatic additions via Angular’s Meta service. Most applications do not use this pattern and will not see any impact from this change.

To identify potential usage, search your codebase for on*= attributes specifically within <meta> tags. Focus your search on index.html and any TypeScript files that interact with Meta service methods like addTag or updateTag.

Consider this problematic example where an event handler is attached to a meta tag:

<!-- index.html or added via Meta service -->
<meta name="analytics-trigger" onclick="console.log('Meta clicked!')">

This onclick handler will no longer execute in Angular 21.2.21. To migrate, refactor any logic tied to these meta event handlers into standard <script> tags or attach event listeners to visible DOM elements.

If the original intent was to execute a script on page load or based on a specific condition, move the script body into a standard <script> tag:

<!-- index.html -->
<script>
  // Original logic from meta onclick/onload
  console.log('Script executed on page load.');
</script>

For logic that reacted to user interaction or specific DOM states, attach an event listener to an appropriate, visible DOM element. For example, if the original intent was to trigger something when the page’s content loaded, use a DOMContentLoaded listener:

// app.component.ts or a service
import { DOCUMENT } from '@angular/common';
import { Inject, Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class MyAnalyticsService {
  constructor(@Inject(DOCUMENT) private document: Document) {
    this.document.addEventListener('DOMContentLoaded', () => {
      // Execute analytics or other logic here
      console.log('DOM fully loaded and parsed.');
    });
  }
}

This change improves application security by enforcing standard DOM behavior and removing a potential XSS vector. If your application currently uses event handlers in <meta> tags, you must refactor this code before upgrading to Angular 21.2.21.

Who Needs Angular 21.2.21

Angular 21.2.21 addresses a critical Cross-Site Scripting (XSS) vulnerability (CVE-2024-XXXX) in DomSanitizer when processing untrusted SVG content. Applications that render user-provided SVG directly into the DOM, particularly those using bypassSecurityTrustHtml or bypassSecurityTrustResourceUrl with SVG inputs, are at risk. This bypass could allow an attacker to execute arbitrary JavaScript in the user’s browser, leading to session hijacking or data exfiltration.

The release also resolves a potential Server-Side Request Forgery (SSRF) vulnerability (CVE-2024-YYYY) in the HttpClient module. This issue affected applications making requests to internal network resources based on dynamically constructed URLs, where a malicious actor could manipulate input to redirect requests. Projects using HttpClient to interact with internal APIs where parts of the URL are derived from external input should review their usage patterns.

To determine if your application is affected by the DomSanitizer XSS, check for direct rendering of user-supplied SVG or other complex HTML. A common vulnerable pattern might look like this:

// Potentially vulnerable if `userInputHtml` comes from an untrusted source
this.sanitizer.bypassSecurityTrustHtml(userInputHtml);

For the SSRF issue, examine HttpClient calls where parts of the URL, especially the hostname or path segment, originate from untrusted user input or external APIs. Ensuring strict validation of all URL components before making requests is key, but this patch provides an additional layer of protection.

Upgrading to 21.2.21 is a low-effort process for most projects. This is a patch release, meaning it contains only bug fixes and security patches, adhering to semantic versioning. No breaking changes are introduced, minimizing migration effort. You can update using the standard Angular CLI command:

ng update @angular/cli @angular/core

Given the nature of the security fixes, specifically the XSS and SSRF vulnerabilities, an immediate upgrade is strongly recommended for all Angular applications. These patches mitigate significant risks that could lead to data breaches, service compromise, or unauthorized internal network access.