Tell me about modules and standalone components in Angular — what is the difference and why switch to standalone?

In Angular, modules (NgModules) are a way to organize an application into logical blocks that group components, directives, services, and other modules. Modules help manage dependencies and the loading of parts of the application.

Standalone components are a new feature that allows creating components that do not require declaration in an NgModule. They define their dependencies themselves and can be used directly, simplifying the application's structure and reducing boilerplate code.

The transition to standalone components is driven by the desire to simplify architecture, speed up loading, and make the code more modular and reusable. This is especially useful in large applications where managing multiple modules becomes complex.

Example of a standalone component:

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

@Component({
  selector: 'app-hello',
  template: `<h1>Hello, Angular!</h1>`,
  standalone: true
})
export class HelloComponent {}

Such a component can be used without the need to include it in an NgModule.