DEV Community

Cover image for AnalogJS 2.5: Runtime i18n, Fast Compilation Mode, Hierarchical Content, and more!
Analog profile image Brandon Roberts
Brandon Roberts for Analog

Posted on

AnalogJS 2.5: Runtime i18n, Fast Compilation Mode, Hierarchical Content, and more!

#angular

We are excited to announce the release of Analog 2.5! This release introduces first-class runtime i18n support, a new fast compilation mode, hierarchical content with recursive prerendering, and a new AI integrations guide. Let's dive in.

Runtime i18n 🌍

Analog 2.5 adds first-class runtime internationalization built on Angular's $localize. With a single build, your app can serve every supported locale, with the active locale detected on both the server and the client.

Setup

Install @angular/localize and import the polyfill in your application entry:

// src/main.ts
import '@angular/localize/init';
Enter fullscreen mode Exit fullscreen mode

Configure the supported locales on the analog() plugin in vite.config.ts. This enables locale detection on SSR and exposes the values as build-time globals so the application config doesn't have to repeat them:

// vite.config.ts
import { defineConfig } from 'vite';
import analog from '@analogjs/platform';

export default defineConfig(() => ({
  plugins: [
    analog({
      i18n: {
        defaultLocale: 'en',
        locales: ['en', 'fr', 'de'],
      },
    }),
  ],
}));
Enter fullscreen mode Exit fullscreen mode

Then provide the runtime translation loader via provideI18n():

// src/app/app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideFileRouter } from '@analogjs/router';
import { provideI18n } from '@analogjs/router/i18n';

export const appConfig: ApplicationConfig = {
  providers: [
    provideFileRouter(),
    provideI18n({
      loader: async (locale) => {
        const translations = await import(`../i18n/${locale}.json`);
        return translations.default;
      },
    }),
  ],
};
Enter fullscreen mode Exit fullscreen mode

Mark templates with the standard Angular i18n attribute:

<h1 i18n="@@greeting">Hello</h1>
Enter fullscreen mode Exit fullscreen mode

On SSR, the locale is detected from the URL path prefix (/fr/about) or the Accept-Language header. On the client, it's read from window.location.pathname. The loader function you provide is called once at startup with the active locale, and $localize handles the rest.

Message Extraction

The i18n plugin option also accepts an extract config that scans the compiled output for $localize tagged templates and writes a translation source file at the end of a production build:

analog({
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'fr', 'de'],
    extract: {
      format: 'json',
      outFile: 'src/i18n/messages.json',
    },
  },
})
Enter fullscreen mode Exit fullscreen mode

format supports json, xliff, xliff2, and xmb.

Switching Locales

A small helper makes runtime locale switching a one-liner:

import { Component } from '@angular/core';
import { injectSwitchLocale } from '@analogjs/router/i18n';

@Component({ /* ... */ })
export class LanguagePickerComponent {
  switchLocale = injectSwitchLocale();
}
Enter fullscreen mode Exit fullscreen mode

Calling switchLocale('fr') navigates to the equivalent /fr URL and re-evaluates templates with the new translations. Check out the i18n docs for the full guide.

Fast Compilation Mode ⚡️

Analog 2.5 introduces fastCompile, a new option on the analog() Vite plugin that enables a Vite-native Angular compilation pipeline combined with OXC for fast parsing. The most noticeable differences are with cold starts and HMR.

Enable it in your Vite config:

// vite.config.ts
import { defineConfig } from 'vite';
import analog from '@analogjs/platform';

export default defineConfig(() => ({
  plugins: [
    analog({
      fastCompile: true,
    }),
  ],
}));
Enter fullscreen mode Exit fullscreen mode

A companion fastCompileMode option controls the compilation output:

  • 'full' (default): Emits final Ivy definitions for application builds.
  • 'partial': Emits partial declarations for library publishing. 
analog({
  fastCompile: true,
  fastCompileMode: 'partial',
})
Enter fullscreen mode Exit fullscreen mode

Fast compilation mode allows you to offload type checking as a separate process, keeping the development workflow streamlined, especially when building content-focused sites and applications.

Hierarchical Content 📚

Support for hierarchical content and nested content directories has been improved for more complex documentation structure:

src/content/docs/
  getting-started/
    welcome.md
    first-upload.md
  assets/
    upload.md
Enter fullscreen mode Exit fullscreen mode

Content resolvers in Analog previously only handled top level folders and slugs in the src/content directory, but is now more flexible to handle nested subdirectories with existing APIs.

Slash-containing slugs

A catch-all route now resolves nested files correctly:

// src/app/pages/docs/[...slug].page.ts
import { Component } from '@angular/core';
import { injectContent, MarkdownComponent } from '@analogjs/content';

@Component({
  standalone: true,
  imports: [MarkdownComponent],
  template: `
    @if (post(); as post) {
      <analog-markdown [content]="post.content" />
    }
  `,
})
export default class DocsPageComponent {
  post = injectContent({ subdirectory: 'docs' });
}
Enter fullscreen mode Exit fullscreen mode

Recursive prerendering

A new recursive option was added, and each content file now exposes a relativePath so transforms can identify identically-named files across subdirectories:

// vite.config.ts
analog({
  prerender: {
    routes: async () => [
      {
        contentDir: 'src/content/docs',
        recursive: true,
        transform: (file) => {
          const segment = file.relativePath
            ? `${file.relativePath}/`
            : '';
          return `/docs/${segment}${file.name}`;
        },
      },
    ],
  },
})
Enter fullscreen mode Exit fullscreen mode

For backward compatibility, recursive defaults to false.

AI Integrations Guide 🤖

Analog 2.5 ships with a new AI integrations guide that walks through wiring LLM providers into Analog's API routes — streaming responses, server-side keys, and the usual use cases. If you're adding AI features to an app, that guide is the starting point.

We are also looking into adding official skills for Analog features and conventions.

Upgrading

To upgrade to Analog 2.5, 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)