Angular 18 has arrived, with new experimental support for zoneless change detection and a stack of improvements to SSR. Here’s how to upgrade your app to Angular 18 and deploy it to Netlify.

TL;DR

Angular 18 is mostly an incremental update of stable features focussing on polish and stability. However under the hood it brings some exciting improvements and experimental new features. Deploying your Angular 18 app to Netlify is as simple as ever, and is still zero-config.

What’s new in Angular 18?

After the dramatic changes in Angular 17 and the new preview features in the minor releases after, Angular 18 is a more incremental update. The team has focused on stability and polish, but there are still some exciting new features to explore.

Big changes in change detection

In version 17.1, Angular introduced preview support for Signal Inputs, a reactive alternative to decorator @Input()s. They offer many benefits, one of which was to pave the way for zoneless change detection. Signals aren’t required for zoneless, but they work best together.

Angular has used zone.js since the beginning of Angular 2, so it is a major step to move to a new world of zoneless. Angular 18 introduces experimental support for this, and the team is keen to get feedback from the community. It unlocks some great improvements

SSR improvements

The biggest improvement to server-side rendering in Angular 18 is the introduction of hydration support with i18, and in Angular Material. Angular 18 also takes further steps towards the merger of Angular and Google’s internal Wiz framework, with the integration of the event dispatch library that powers Google Search. SSR works out of the box on Netlify in Angular 17 or later, automatically deploying to edge functions if enabled in your app.

How to upgrade to Angular 18

Simple apps running version 17 will be able to upgrade to Angular 18 by running ng update @angular/core@18 @angular/cli@18. However more complex apps, or those on older versions should follow the upgrade guide. You can then deploy to Netlify.

How to deploy Angular 18 to Netlify

Netlify automatically detects Angular apps and builds them with zero-config. You can link your repository to automatically build and deploy your app, or you can deploy manually from the command line.

To link your site and deploy from the command line, first install the Netlify CLI:

npm install -g netlify-cli

Then link your site:

netlify init

You can then deploy your site by running:

netlify deploy --build --prod

Alternatively you can link your repository in the Netlify UI to set up continuous deployment.