At Angular Connect 2023, Google confirmed a major shift in the evolution of Angular, a transition that started with Angular 15. The goal is to make Angular lighter, faster, and easier to use.

With Standalone Components, a new reactivity model with Signals, and a high-performance build system using Esbuild and Vite, Angular is embracing a more streamlined approach that aligns with modern web development practices.

Standalone Components: A New Architecture

Since its early versions, Angular relied on a modular system where each component was declared inside an NgModule, defining dependencies and organizing the application structure.

Starting with Angular 14, developers can now create Standalone Components, which function independently of NgModules. This approach simplifies the component structure, makes imports more intuitive, and reduces unnecessary complexity.

Before Angular 15:

@NgModule({
  declarations: [MyComponent],
  imports: [CommonModule],
  exports: [MyComponent]
})
export class MyModule {}

With Angular 17:

@Component({
  standalone: true,
  imports: [CommonModule],
  selector: 'app-my-component',
  template: `<h2>Standalone Component</h2>`
})
export class MyComponent {}

This marks a significant shift in Angular’s architecture, which was originally designed for large-scale applications but was often criticized for its complexity.

By progressively replacing NgModules, Google is making Angular lighter and aligning it with modern component-based frameworks like React and Vue, where standalone components are the default.

Signals: A More Efficient Reactivity Model

While Standalone Components simplify how Angular applications are structured, Signals are changing how state updates are handled, bringing a more efficient reactivity model.

Until Angular 16, Angular used Zone.js to track asynchronous events and trigger a Change Detection cycle, causing a full re-scan of the component tree. This approach, while effective, could be resource-intensive, especially in large applications.

With Signals, Angular introduces a more granular and optimized reactivity system. Instead of scanning the entire UI, only the affected components are updated, reducing computation overhead and significantly improving performance.

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

export class CounterComponent {
  count = signal(0); // Creating a signal with an initial value

  increment() {
    this.count.update(value => value + 1); // Updating the signal
  }
}

<p>Counter: {{ count() }}</p>
<button (click)="increment()">+1</button>

Additionally, Google introduced computed and effect to react to data changes more efficiently:

• computed creates derived values from a signal and updates automatically.
• effect executes a function whenever a signal changes. Here’s an example of a component that calculates and logs a percentage dynamically:

export class PercentageComponent {
  currentValue = signal(30);
  totalValue = signal(100);

  percentage = computed(() => 
    this.totalValue() === 0 ? 0 : (this.currentValue() / this.totalValue()) * 100
  );

  constructor() {
    effect(() => {
      console.log("Updated percentage:", this.percentage());
    });
  }

  increase() {
    this.currentValue.update(value => Math.min(value + 10, this.totalValue()));
  }
}

With this change, Angular adopts a more efficient reactivity model, similar to SolidJS and React, where updates are applied at a highly granular level.

Typed Forms: A Stronger TypeScript Integration

Before Angular 14, Reactive Forms were not fully typed. The values of FormControl were considered any, increasing the risk of runtime errors due to type mismatches.

With Typed Forms, Google improves type safety, making forms more reliable and better integrated with TypeScript.

export class UserFormComponent {
  userForm = new FormGroup({
    name: new FormControl<string>(''),
    age: new FormControl<number | null>(null),
  });

  submit() {
    console.log(this.userForm.value); 
  }
}

This change reduces type-related bugs and improves IDE autocompletion, making forms safer and easier to work with.

Esbuild & Vite: Faster Build and Development

With Angular 17, Google replaces Webpack with Esbuild and Webpack Dev Server with Vite to improve performance during development and production.

Esbuild offers up to ten times faster builds thanks to its multi-threaded compilation process.
Vite provides instant startup for the dev server and much faster Hot Module Replacement (HMR).
This transition drastically reduces build times, speeds up local development, and enhances the developer experience.

Conclusion: A Simpler, Faster, and More Modern Angular

With Angular 17, Google is reshaping its framework to align with modern web development trends.

Standalone Components simplify architecture, Signals improve reactivity performance, and Esbuild and Vite make the build and dev experience significantly faster.

However, this is just the beginning. The gradual removal of Zone.js, further improvements to Typed Forms, and a reactivity model that continues to evolve toward SolidJS and React’s efficiency all hint at an even leaner, more modular Angular in the future.

With these innovations, Angular is no longer just following web development trends. It is becoming a leading force in the evolution of modern web frameworks.