Configuring i18n, SSR, SSG, and Major Changes in Angular 19

A detailed article to i18n, SSR, SSG, and Major Changes in Angular 19.

Angular 19 brings exciting new capabilities that revolutionize how developers configure and build modern web applications. From internationalization to server-side rendering, static site generation, and the default adoption of standalone components — this guide breaks down everything you need to know to make the most of Angular 19’s power.

🌍 Internationalization (i18n) Settings in Angular 19

Setting Up i18n Support

Configuring internationalization (i18n) in an Angular 19 application involves a series of steps to enable support for multiple languages. The first step typically involves installing the necessary @angular/localize package using npm:

npm install @angular/localize --legacy-peer-deps

Once installed, developers need to mark the text in their component templates that requires translation. This is done using the i18n attribute directly on the HTML elements containing the text. Additionally, for text strings within the component's TypeScript code, the $localize tagged message string should be used.

Translation Files and Formats

The next crucial step is the creation and management of translation files. These files contain the translated text for each supported language. Angular's built-in i18n system primarily uses the XLIFF format (.xlf), with files typically named messages.<locale>.xlf (e.g., messages.en.xlf, messages.fr.xlf) and placed in the src/locale directory.

Alternatively, for developers using third-party libraries like ngx-translate, translation files are commonly in JSON format.

Integrating i18n into the Build Process

To integrate i18n with the application's build process for different locales, the angular.json file needs to be configured under the "build" target’s "configurations" section. Each configuration should specify:

• i18nLocale
• i18nFile
• outputPath

Example configuration for French:

"fr": {
  "aot": true,
  "outputPath": "dist/my-app/fr",
  "i18nFile": "src/locale/messages.fr.xlf",
  "i18nLocale": "fr",
  "i18nMissingTranslation": "warning"
}

Providing the Locale ID

The application's root module (app.module.ts for NgModule-based apps, or app.config.ts for standalone apps) needs to be updated to provide the LOCALE_ID. This is essential for formatting dates, numbers, and currencies.

Example for NgModules:

import { LOCALE_ID, NgModule } from '@angular/core';

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: 'en' } // Default locale
  ]
})
export class AppModule {}

In standalone apps, use the ApplicationConfig in app.config.ts.

Building and Serving Localized Versions

To build and serve the app for a specific locale (e.g., French):

ng build --configuration=fr
ng serve --configuration=fr

Some users experienced issues with ng serve in early Angular 19 versions, so use a stable version when possible.

Using i18n Attributes and ngx-translate Pipes

Angular provides built-in directives and pipes for i18n. Use the i18n attribute on HTML elements or use translate pipes (via ngx-translate) for dynamic translations based on the selected language.

Server-Side Rendering (SSR) and Static Site Generation (SSG) in Angular 19

Setting Up SSR with Angular Universal

SSR in Angular 19 leverages Angular Universal. Start by running:

ng add @nguniversal/express-engine

This command sets up the Express server and generates essential files:
main.server.ts, server.ts, app.server.module.ts, app.config.server.ts.

Route-Level Render Mode

Angular 19 introduces Route-Level Render Mode, allowing different rendering strategies per route:

• RenderMode.Server – Server rendering
• RenderMode.Prerender – Build-time static generation
• RenderMode.Client – Client-side only

Configure routes in app.config.server.ts.

Incremental Hydration (Experimental)

Enable with:

provideClientHydration(withIncrementalHydration())

Use the @defer syntax to hydrate components based on viewport, interaction, or conditions — greatly improving performance.

Event Replay (Stable)

Enabled by default, Event Replay ensures no user actions are lost during hydration:

provideClientHydration(withEventReplay())

Accessing Request and Response in SSR

With new DI tokens like REQUEST and RESPONSE_INIT from @angular/core, it's easier to access HTTP context during SSR.

Static Site Generation (SSG)

SSG (prerendering) builds static HTML for specific routes at build time. Generate an SSR-ready project using:

ng new --ssr

Define prerender routes in angular.json, or use a routesFile.

Set outputMode: "static" in angular.json for SSG.

| Render Mode | Description | Use Cases | |-----------------------|--------------------------------------------------------------|----------------------------------------------------------| | RenderMode.Server | Renders on server per request | Dynamic content, real-time data | | RenderMode.Prerender | Static HTML at build time | Blogs, landing pages, docs | | RenderMode.Client | Client-only rendering | User-specific or interactive areas |

Deployment Tips

Deploy SSR apps to Node.js servers or platforms like Firebase with Cloud Functions. Be cautious with browser-specific APIs — they might not be available during SSR.

New Features and Major Configuration Changes in Angular 19

Standalone Components by Default

Angular 19 uses standalone components as default. That means:

• Components, directives, and pipes don’t require NgModules.
• New projects will have standalone: true by default.
• Use ng update to migrate existing apps.

To enforce this across your app:

"strictStandalone": true

Add this to your tsconfig.json.

Application Bootstrapping with bootstrapApplication

Standalone apps now use bootstrapApplication in main.ts with an ApplicationConfig object to define providers.

Incremental Hydration (Again!)

Hydration logic now allows @defer blocks triggered by viewport, hover, or custom logic — improving time-to-interactive drastically.

Resource API (Experimental)

The new resource() and rxResource() APIs simplify data fetching with signals. They expose:

• isLoading
• value
• error

...and streamline handling of async resources.

Linked Signals and Event Replay

Linked Signals offer reactive state management based on other signals. Event Replay (now stable) ensures SSR interactivity remains smooth.

Improved HMR + Angular Language Service

Hot Module Replacement now supports styles and partial template reloads. Angular Language Service improvements include:

• Better unused import diagnostics
• Autocomplete in templates
• Migration support for signals

Server Route Configuration

Define per-route rendering in ServerRoute interface — server, prerender, or client.

Conclusion and Recommendations

Angular 19 marks a significant step forward in the evolution of the framework, bringing with it a host of new features and improvements focused on performance and developer experience.

Best Practices

• ✅ Embrace standalone components to simplify architecture
  
• ⚡ Use Incremental Hydration and Render Modes to boost SSR/SSG performance
  
• 🧠 Try the Resource API for clean async data handling