angular

This is an Angular compiler bug affecting SVG or MathML elements that are the root node of a control-flow block. Angular generates a namespaced tag such as :svg:svg, so it does not match an ng-content tag selector like select="svg" and the element is projected into the default slot.

Workaround: add ngProjectAs to the root SVG or MathML element:

@if (saving()) {
  <svg class="spinner" ngProjectAs="svg">...</svg>
} @else {
  <svg ngProjectAs="svg">...</svg>
}

For MathML, use:

<math ngProjectAs="math">...</math>

The same workaround applies to @for, @switch, and *ngIf root nodes. Attribute and class selectors are not affected. A permanent fix is provided in the Angular compiler PR; upgrade Angular once a release containing the fix is available.

Cause: Angular 22's JIT path (ɵɵngDeclareComponent → convertDeclareComponentFacadeToMetadata) ignores the declared library version and defaults changeDetection to OnPush, while the AOT linker correctly keeps components compiled with Angular < 22 on Default/Eager. Libraries compiled with partial mode before v22 (e.g., Kendo UI for Angular compiled with Angular 20.3) may assign state inside subscriptions without markForCheck(), so in JIT-based tools (Storybook, jest-preset-angular, Vitest, TestBed, ng serve --aot=false) the view never refreshes, while the AOT build works fine. Workaround: patch the JIT compiler facade before any library declaration is evaluated (e.g., in your Storybook preview setup or test setup file):

import '@angular/compiler';
import { ChangeDetectionStrategy } from '@angular/core';

const facade = (globalThis as any).ng?.ɵcompilerFacade;
const original = facade.compileComponentDeclaration.bind(facade);
facade.compileComponentDeclaration = (env: unknown, url: string, decl: any) => {
  const major = Number.parseInt(String(decl.version ?? '0').split('.')[0], 10);
  const patched =
    decl.changeDetection == null && major > 0 && major < 22
      ? { ...decl, changeDetection: ChangeDetectionStrategy.Eager }
      : decl;
  return original(env, url, patched);
};

Alternatively, set changeDetection: ChangeDetectionStrategy.Default explicitly in the library's components and republish with Angular 22. Track the fix in angular/angular#71107.

This is a known Angular bug (issue #71425) affecting provideClientHydration(withI18nSupport()). When the same component with an ICU expression (e.g. {count, plural, ...}) appears multiple times on a page, the server deduplicates hydration data so both instances share the same ngh object. The client then mutates the shared ICU case queue with shift(), so only the first instance hydrates correctly — later instances render the ICU content twice (production) or throw ASSERTION ERROR: expected matching nodeType [Expected=> 8 == 3 <=Actual] (dev mode).

**Workaround:** Replace the ICU expression with control flow and separate i18n messages:

@if (count === 1) {
  <ng-container i18n>1 item</ng-container>
} @else {
  <ng-container i18n>{{ count }} items</ng-container>
}

This avoids the shared ICU case queue entirely. The bug exists in Angular 18.2 through at least 21.2/22.x, so upgrading does not help — use the workaround until the fix lands (the proposed fix copies the case queue with [...caseQueue] instead of mutating the shared serialized data).

NG0904 occurs when a plain string is bound to a resource URL property such as <iframe [src]>. Calling sanitize(SecurityContext.URL, url) is insufficient for resource URLs; Angular requires an explicitly trusted SafeResourceUrl.

Fix it with bypassSecurityTrustResourceUrl:

import { Component, inject } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  template: `<iframe [src]="trustedUrl"></iframe>`,
})
export class App {
  readonly url = 'data:image/svg+xml;base64,...';
  private readonly sanitizer = inject(DomSanitizer);
  readonly trustedUrl: SafeResourceUrl =
    this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
}

Only use this for URLs you trust, especially data: URLs or user-provided URLs. For untrusted input, validate it against an allowlist or do not bind it to a resource URL.

This is a known Angular DevTools route-highlighting bug: when viewing a nested URL such as /posts/1, the root route / is incorrectly marked as active even though it is not the active route. It was fixed in angular/angular#65037.

To resolve it:
1. Update the Angular DevTools browser extension.
- Chrome/Edge: open chrome://extensions, enable Developer mode, click **Update**, then reopen DevTools.
- Firefox: update Angular DevTools from about:addons.
2. If running DevTools locally, pull the latest code and rebuild:

git pull origin main
   npm install
   npm start

Alternatively, cherry-pick or merge PR #65037.

No application routing change is required. Until updated, treat the active badge on / as a display-only bug and verify the current route with Router.url or router events.