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
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
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
}
}
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
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,
},
];
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 });
}
}
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())
]
});
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());
Example: Making use of incremental hydration
@defer (hydrate on viewport) {
<blog-post/>
}
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
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.
- 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 inpokemon.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.
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.
None
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!
Top comments (0)