DEV Community

Analog profile image Brandon Roberts
Brandon Roberts for Analog

Posted on

AnalogJS 2.4: Vite 8, Vitest Snapshot Serializers, Astro v6 Support, and more!

#angular

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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());
Enter fullscreen mode Exit fullscreen mode

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 },
});
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Then update @analogjs/astro-angular to the latest version:

npm install @analogjs/astro-angular@latest
Enter fullscreen mode Exit fullscreen mode

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 })],
});
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

If you're using Nx, run:

nx migrate @analogjs/platform@latest
Enter fullscreen mode Exit fullscreen mode

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 🥇

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!

Top comments (0)