DEV Community

Cover image for Angular 19: Updating our projects and harnessing its latest features
Dimitris Kiriakakis
Dimitris Kiriakakis

Posted on

12

Angular 19: Updating our projects and harnessing its latest features

The Angular team recently released version 19 and this version introduces various features that improve developer experience as well as performance. In this post, we'll take a look at the key updates and we will review some examples that showcase how to benefit from these features in our own Angular applications.

In case you want to see these features in action, in the end of this article you will also find the link to a Pull Request, that I prepared in order to update my own angular-optimization project to version 19.

Updating our project

As with every version update we can make use of the CLI update command to kick off our project update as such:

ng update @angular/cli @angular/core
Enter fullscreen mode Exit fullscreen mode

Keep in mind that in version 19 all components are standalone by default, so we no longer need standalone: true to declare a component as standalone. In order to migrate our project there is a related migration provided:

ng generate @angular/core:standalone
Enter fullscreen mode Exit fullscreen mode

As part of the migration we can migrate our components to standalone, cleanup unused NgModules and bootstrap our app using standalone APIs. Once we're done we can enforce the standalone API in our project by enabling the related compiler flag in our tsconfig.json.

{
  "angularCompilerOptions": {
    "strictStandalone": true
  }
}
Enter fullscreen mode Exit fullscreen mode

In version 19 we also got migrations to convert constructor-based injection in our classes to use the inject function instead, to clean up all unused imports within our project and to convert eagerly loaded component routes to lazy loaded routes.

ng generate @angular/core:inject
ng generate @angular/core:cleanup-unused-imports
ng generate @angular/core:route-lazy-loading
Enter fullscreen mode Exit fullscreen mode

Please use the last one with caution, as by default it will convert all your component routes to lazy loaded routes (you might still want to eagerly load some of them).

Key Features to Explore

Here are some of the major features introduced in Angular 19 that you can leverage in your projects:

1. Enhanced Server-Side Rendering (SSR) with Server Routes Configuration

Angular 19 enhances server-side rendering by allowing developers to configure how different routes are rendered. You can specify whether a route should be prerendered, server-side rendered, or client-side rendered and resolve route parameters during prerendering.

Example: A sample server routes configuration

import { RenderMode, ServerRoute } from '@angular/ssr';

export const routes: ServerRoute[] = [
  {
    path: '', // This page is static, so we prerender it (SSG)
    renderMode: RenderMode.Prerender,
  },
  {
    path: 'post/:id', // These pages will be prerendered (SSG), but we make use of a parameter to render them
    renderMode: RenderMode.Prerender,
    async getPrerenderParams() {
      const dataService = inject(DataService);
      const ids = await dataService.getIds(); // Assuming this returns ['1', '2', '3']
      return ids.map(id => ({ id })); // Transforms IDs into an array of objects for prerendering
      // This will prerender the paths: `/post/1`, `/post/2` and `/post/3`
    },
  },
  {
    path: 'blog', // This renders the blog page on the server (SSR)
    renderMode: RenderMode.Server,
  },
  {
    path: '**', // This renders the rest of the pages on the client (CSR)
    renderMode: RenderMode.Client,
  },
];
Enter fullscreen mode Exit fullscreen mode

By configuring server routes, we can optimize loading times and improve SEO, as we might need to render our content before it reaches the client.

2. Signal-Based Resource API

One of the standout features of Angular 19 is the introduction of the signal-based resource API. This allows developers to manage application state and HTTP requests more effectively with signals, providing a reactive paradigm for state management.

Example: Making use of the signal-based resource API

import { signal, resource } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class DataService {
  private paramsSignal = signal({ limit: 20, offset: 0 });

  // Resource for fetching data
  dataResource = resource<DataResponse, { limit: number; offset: number }>({
    request: this.paramsSignal,
    loader: async (params) => {
      const { limit, offset } = params.request;
      const response = await fetch(`/api/data?limit=${limit}&offset=${offset}`);
      return await response.json();
    },
  });

  // Method to update parameters
  updateParams(limit: number, offset: number) {
    this.paramsSignal.set({ limit, offset });
  }
}
Enter fullscreen mode Exit fullscreen mode

By utilizing the newly introduced signal based resource API, we now have a seamless way to make our component signals interact with external APIs.

3. View Transitions with withViewTransitions

Another exciting feature in Angular 19 is support for view transitions using the withViewTransitions API. This enables smoother transitions between routes by running the route activation and deactivation inside document.startViewTransition. It enhances user experience by providing visually appealing navigation.

Example: Enabling View Transitions

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { AppComponent } from './app.component';
import { appRoutes } from './app.routes';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(appRoutes, withViewTransitions())
  ]
});
Enter fullscreen mode Exit fullscreen mode

After we enable view transitions on our project, we will be able to experience them when navigating from any route to another one.

4. Incremental Hydration (Developer Preview)

Version 19 brings Angular server-side rendering to another level with incremental hydration. Incremental hydration allows us to annotate parts of our template, using the already familiar @defer syntax, instructing Angular to load and hydrate them on specific triggers, lazily.

Example: Enabling incremental hydration

import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';

// ...
provideClientHydration(withIncrementalHydration());
Enter fullscreen mode Exit fullscreen mode

Example: Making use of incremental hydration

@defer (hydrate on viewport) {
  <blog-post/>
}
Enter fullscreen mode Exit fullscreen mode

When our app loads, Angular will not download and hydrate the blog-post component until it enters the viewport.

Dev Server Updates (HMR)

Angular v19 supports hot module replacement (HMR) for styles out of the box and enables experimental support for template HMR.

Prior to this improvement, every time we changed the style or template of a component and saved the file, the Angular CLI would rebuild our app and send a notification to the browser which would refresh.

The new HMR will compile the style or template we modified, send the result to the browser, and patch our app without a page refresh. Hot module replacement for styles is enabled by default in v19, while we can try HMR for templates by running NG_HMR_TEMPLATES=1 ng serve.

Update and new features in action

I recently updated my angular-optimization project to version 19 as part of a Pull Request where you can see the update process, as well as real-life examples of utilizing the latest features:

Update to angular v19 and utilise resource API #9

Overview

This pull request updates the Angular version to v19 and utilizes most of the newly introduced features as well as showcases the new Angular signal-based resource API for fetching request data.

Key Changes

  • Updated Angular version to v19.0.4.
  • Migrated to inject syntax for services and signal based inputs
  • Introduced the newly introduced, signal based resource API for data fetching in pokemon.service.ts.
  • Updated imports in several components utilising the unused import notifications.
  • Migrated to the new server routing configuration in app.config.server.ts and defined rendering modes for available routes.
  • Adapted server.ts to enable Netlify edge functions support for SSR
  • Added in-memory scrolling configuration in the app/config.ts and enabled view transitions.
  • Adjusted angular.json configuration to align with latest v19 standards.

Implementation Details

The Angular version was updated by modifying the package.json and pnpm-lock.yaml files. The angular.json file was updated to reflect changes in the Angular build system and to specify SSR rendering modes for different routes. The resource API in pokemon.service.ts is now used to fetch Pokemon data. This provides efficient and type-safe data fetching. The app.config.server.ts file was altered to utilise the newly introduced server routes (in version 19) that enable defining the rendering mode for each route. that leverages the resource API. Within the server.ts there was also some more adaptations to support Netlify edge functions for server side rendering.

Breaking Changes & Dependencies

None

Additional Notes

None

Conclusion

Upgrading to Angular 19 provides a variety of new features that can greatly benefit our applications. By exploring these enhancements, we can improve the performance, usability, and maintainability of our Angular projects.

Don't hesitate to check out the official Angular documentation for more detailed insights on these features and if you have any questions or need assistance with your upgrade, feel free to reach out to me.

Happy coding!

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️