DEV Community

Cover image for Exploring Angular v18: Zoneless Change Detection and More
Dipak Ahirav
Dipak Ahirav

Posted on • Updated on

Exploring Angular v18: Zoneless Change Detection and More

Introduction

We are thrilled to announce the release of Angular v18! This version focuses on stabilizing many new APIs, addressing common developer requests, and experimentally introducing zoneless change detection.

please subscribe to my YouTube channel to support my channel and get more web development tutorials.

Key Highlights

1. Zoneless Change Detection
Zoneless change detection is now available experimentally, eliminating the need for zone.js, leading to improved performance, faster initial renders, smaller bundle sizes, and simpler debugging.

Enabling Zoneless Change Detection

To enable zoneless change detection, modify your application bootstrap configuration:

import { bootstrapApplication } from '@angular/platform-browser';
import { provideExperimentalZonelessChangeDetection } from '@angular/core';

bootstrapApplication(App, {
  providers: [
    provideExperimentalZonelessChangeDetection()
  ]
});
Enter fullscreen mode Exit fullscreen mode

Remove zone.js from angular.json.

Example Component

Here's an example of a component using zoneless change detection:

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

@Component({
  selector: 'app-root',
  template: `
    <h1>Hello from {{ name() }}!</h1>
    <button (click)="handleClick()">Go Zoneless</button>
  `,
})
export class App {
  protected name = signal('Angular');

  handleClick() {
    this.name.set('Zoneless Angular');
  }
}
Enter fullscreen mode Exit fullscreen mode

2. Material 3 and Deferrable Views
Material 3 components and deferrable views are now stable. Material 3 incorporates feedback-based improvements, and deferrable views help enhance Core Web Vitals.

3. Built-in Control Flow
The built-in control flow API is now stable, featuring better type checking and ergonomic implicit variable aliasing.

Server-Side Rendering Enhancements

Improved i18n Hydration Support
i18n hydration support is now available, enabling better handling of internationalized content during hydration.

Enhanced Debugging Tools
Angular DevTools now visualize the hydration process, displaying component hydration statuses and identifying hydration errors.

Firebase App Hosting

Angular v18 supports dynamic Angular applications on Firebase App Hosting, simplifying deployment and enhancing performance.

TypeScript 5.4 Compatibility

This version is fully compatible with TypeScript 5.4, allowing developers to utilize the latest TypeScript features.

Additional Updates

Unified Control State Change Events
Form controls now expose an events property for tracking changes in value, touch state, pristine status, and control status.

const nameControl = new FormControl<string | null>('name', Validators.required);
nameControl.events.subscribe(event => {
  // process the individual events
});
Enter fullscreen mode Exit fullscreen mode

Automated Migration to Application Builder
The new application builder, based on Vite with esbuild, replaces the previous webpack experience, reducing dependencies and improving installation times.

Route Redirects as Functions
The redirectTo property now accepts a function, providing higher flexibility for dynamic route redirects.

const routes: Routes = [
  { path: "first-component", component: FirstComponent },
  {
    path: "old-user-page",
    redirectTo: ({ queryParams }) => {
      const userIdParam = queryParams['userId'];
      if (userIdParam !== undefined) {
        return `/user/${userIdParam}`;
      } else {
        return `/not-found`;
      }
    },
  },
  { path: "user/:userId", component: OtherComponent },
];
Enter fullscreen mode Exit fullscreen mode

Series Index

Part Title Link
1 Ditch Passwords: Add Facial Recognition to Your Website with FACEIO Read
2 The Ultimate Git Command Cheatsheet Read
3 Top 12 JavaScript Resources for Learning and Mastery Read
4 Angular vs. React: A Comprehensive Comparison Read
5 Top 10 JavaScript Best Practices for Writing Clean Code Read
6 Top 20 JavaScript Tricks and Tips for Every Developer 🚀 Read
7 8 Exciting New JavaScript Concepts You Need to Know Read
8 Top 7 Tips for Managing State in JavaScript Applications Read
9 🔒 Essential Node.js Security Best Practices Read
10 10 Best Practices for Optimizing Angular Performance Read
11 Top 10 React Performance Optimization Techniques Read
12 Top 15 JavaScript Projects to Boost Your Portfolio Read
13 6 Repositories To Master Node.js Read
14 Best 6 Repositories To Master Next.js Read
15 Top 5 JavaScript Libraries for Building Interactive UI Read
16 Top 3 JavaScript Concepts Every Developer Should Know Read
17 20 Ways to Improve Node.js Performance at Scale Read
18 Boost Your Node.js App Performance with Compression Middleware Read
19 Understanding Dijkstra's Algorithm: A Step-by-Step Guide Read
20 Understanding NPM and NVM: Essential Tools for Node.js Development Read

Conclusion

Angular v18 brings numerous improvements and new features that enhance performance, developer experience, and application capabilities. From zoneless change detection to stable Material 3 components and improved SSR, this release empowers developers to build more efficient and robust applications. For detailed information, visit the official Angular blog post.

Stay updated with the latest Angular developments and happy coding with Angular v18!

Follow me for more tutorials and tips on web development. Feel free to leave comments or questions below!

Follow and Subscribe:

Top comments (2)

Collapse
 
spock123 profile image
Lars Rye Jeppesen

Error: NG0908: In this configuration Angular requires Zone.js

Anyone knows how to configure this when using old fashioned modules, and no standalone components?

Collapse
 
dipakahirav profile image
Dipak Ahirav

Thank you so much for your kind words and feedback! 🙏 I'm thrilled to hear that you found the post helpful. Your support means a lot to me. If you enjoyed this post, please consider subscribing to my YouTube channel devDive with Dipak for more content. Don’t forget to share it with your friends and help spread the word. Your support helps me to continue creating valuable content. Thanks again! 😊