We are excited to announce the release of Analog 2.4! This release brings Vite 8 support, significant testing improvements for Vitest w/ Angular, and an updated Astro Angular integration. Let's dive in.
Vite 8 Support ⚡️
Analog 2.4 updates to the stable release of Vite 8.0.0. This is a major ecosystem alignment that brings several benefits:
Rolldown bundler: Vite 8 introduces Rolldown, a Rust-based bundler, as an alternative to esbuild for optimization. Analog's Angular Vite plugin now detects Rolldown availability and uses OXC-based compilation when available.
Vite Environment API: Analog leverages the new Environment API for managing client and server configurations, particularly in the Astro Angular integration.
Backward compatibility: Analog integrations continue to support Vite 5 through 8, so you can upgrade at your own pace.
Vitest DX Improvements 🧪
Reusable Snapshot Serializers
Writing snapshot tests for Angular components often produces noisy output filled with framework internals like _ngcontent-*, _nghost-*, ng-reflect-* attributes, and <!--container--> comments. Analog 2.4 introduces three built-in snapshot serializers that clean this up.
createNoNgAttributesSnapshotSerializer strips Angular runtime noise from DOM snapshots. Here's what that looks like in practice:
<!-- Before -->
<div id="root0" ng-version="21.1.3" _nghost-a-c1="" class="card ng-star-inserted keep-me">
<span class="card ng-star-inserted" _ngcontent-a-c1="" ng-reflect-foo="bar">Title</span>
</div>
<!-- After -->
<div class="card keep-me">
<span class="card">Title</span>
</div>
createAngularFixtureSnapshotSerializer converts ComponentFixture objects into clean component markup, so instead of seeing raw testing internals you get:
<app-chip>
<h1>
Hello [Input Signal: Alice]
</h1>
</app-chip>
createHtmlCommentSnapshotSerializer removes Angular-generated HTML comments like <!--container-->.
The easiest way to enable all serializers is via the automatic setup imports in your test setup file:
import '@angular/compiler';
import '@analogjs/vitest-angular/setup-snapshots';
import '@analogjs/vitest-angular/setup-serializers';
import { setupTestBed } from '@analogjs/vitest-angular/setup-testbed';
setupTestBed();
New Analog projects include this by default. You can also register serializers individually if you need more control:
import {
createAngularFixtureSnapshotSerializer,
createNoNgAttributesSnapshotSerializer,
createHtmlCommentSnapshotSerializer,
} from '@analogjs/vitest-angular/snapshot-serializers';
expect.addSnapshotSerializer(createAngularFixtureSnapshotSerializer());
expect.addSnapshotSerializer(createNoNgAttributesSnapshotSerializer());
expect.addSnapshotSerializer(createHtmlCommentSnapshotSerializer());
Many thanks to Tim Deschryver for adding this feature!
teardown.destroyAfterEach Option
The new teardown option on setupTestBed gives you explicit control over Angular TestBed cleanup behavior:
import { setupTestBed } from '@analogjs/vitest-angular/setup-testbed';
setupTestBed({
teardown: { destroyAfterEach: false },
});
This replaces the browserMode option, which is now deprecated and will be removed in v3.0.0.
Check out our Vitest Guide for more information on setting up Vitest in your Angular projects.
Many thanks to Younes Jaaidi for adding this feature!
Astro v6 Support & Strict Style Placement 🚀
Astro v6 Compatibility
Analog 2.4 adds full support for Astro v6 via the new Vite Environment API. Use the official Astro upgrade tool to update Astro and its integrations together:
npx @astrojs/upgrade
Then update @analogjs/astro-angular to the latest version:
npm install @analogjs/astro-angular@latest
strictStylePlacement Option
A new strictStylePlacement configuration option moves Angular component styles from the component body into the document <head>, producing valid HTML output:
// astro.config.mjs
import { defineConfig } from 'astro/config';
import angular from '@analogjs/astro-angular';
export default defineConfig({
integrations: [angular({ strictStylePlacement: true })],
});
When enabled, Angular component styles are relocated to <head> regardless of which island they originate from. Style ordering is preserved across multiple islands, and styles inside <template> elements (shadow DOM) are left in place. This lays the foundation for enabling client-side hydration of Angular components when used with Astro.
Note: Enabling this option disables Astro's streaming mode under SSR.
Many thanks to eblocha for the feature request and addition!
Upgrading
To upgrade to Analog 2.4, run:
ng update @analogjs/platform@latest
If you're using Nx, run:
nx migrate @analogjs/platform@latest
For the full list of changes, see the changelog.
Partner with Analog 🤝
Continued development of Analog would not be possible without our partners and community. Thanks to our official deployment partner Zerops, code review partner CodeRabbit, and longtime supporters Snyder Technologies, Nx, and House of Angular, and many other backers of the project.
Find out more information on our partnership opportunities or reach out directly to partnerships[at]analogjs.org.
Join the Community 🥇
- Visit and Star the GitHub Repo
- Join the Discord
- Follow us on Twitter
If you enjoyed this post, click the ❤️ so other people will see it. Follow AnalogJS and Brandon Roberts on Bluesky, and subscribe to my YouTube Channel for more content!
SOCIAL SHARE CARD GENERATOR