Angular Standalone Components: A Step Toward Simpler Apps

Date: December 5, 2022

---

Introduction

Angular 14 introduced a powerful new feature: standalone components. This innovation marks a shift away from the traditional module-based architecture that Angular has used since its inception. Standalone components aim to simplify app structure, reduce boilerplate, and improve developer experience. In this post, we’ll explore what standalone components are, why they matter, and how to start using them in your Angular projects today.

---

What Are Standalone Components?

Traditionally, every Angular component had to be declared inside an Angular NgModule — a modular container that groups components, directives, pipes, and services. While NgModules enable powerful organization and lazy loading, they also add complexity and extra boilerplate, especially for smaller apps or libraries.

Standalone components remove the requirement to declare a component inside a module. Instead, a component can be self-contained with its own dependencies.

Key difference:

// Traditional component inside NgModule
@Component({
  selector: 'app-hello',
  template: `<h1>Hello World</h1>`,
})
export class HelloComponent {}

@NgModule({
  declarations: [HelloComponent],
  imports: [CommonModule],
})
export class HelloModule {}

vs.

// Standalone component (Angular 14+)
@Component({
  selector: 'app-hello',
  standalone: true,
  imports: [CommonModule],
  template: `<h1>Hello World</h1>`,
})
export class HelloComponent {}

---

Why Standalone Components Matter

1. Reduced Boilerplate

You no longer need to create and maintain NgModules for every component, especially for small or reusable components.

2. Simplified Dependency Management

Each standalone component explicitly declares its dependencies in the imports array, making dependencies clearer and reducing hidden coupling through modules.

3. Easier Testing and Reuse

Standalone components can be imported directly in tests or other components without module imports.

4. Gradual Adoption

You can adopt standalone components incrementally in existing Angular apps, mixing with module-based components without breaking changes.

---

Using Standalone Components: Practical Example

Creating a Standalone Component

Generate a new component using Angular CLI (version 14+ supports this flag):

ng generate component hello-world --standalone

This will create:

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

@Component({
  selector: 'app-hello-world',
  standalone: true,
  imports: [CommonModule],
  template: `<h2>Hello from Standalone Component!</h2>`,
})
export class HelloWorldComponent {}

Using a Standalone Component in Another Component

Import it directly in another standalone or module-based component:

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [HelloWorldComponent, CommonModule],
  template: `<app-hello-world></app-hello-world>`,
})
export class AppComponent {}

Bootstrapping the App with Standalone Components

Since Angular 14, you can bootstrap standalone components directly:

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

bootstrapApplication(AppComponent)
  .catch(err => console.error(err));

No need for a traditional AppModule!

---

Considerations When Using Standalone Components

• Lazy loading: Angular still supports lazy loading with standalone components using route-level loadComponent.
• Third-party libraries: Many Angular libraries are gradually updating to support standalone components.
• Tooling: Angular CLI and ecosystem tools increasingly support standalone components for smooth developer workflows.

---

Conclusion

Standalone components in Angular 14 are a significant step toward simplifying Angular applications by reducing boilerplate and clarifying dependencies. Whether you’re starting a new project or maintaining an existing one, adopting standalone components can streamline your development process.