Standalone Components and How to Combine Them with NgModule

With the release of Angular 19, standalone components have become a mainstream approach for building applications without the overhead of traditional NgModule.

However, many existing projects still rely on NgModule, and developers often need to integrate standalone components within an NgModule-based architecture. This blog post explores Angular 19 standalone components and how to seamlessly combine them with NgModule.

Whether you’re a seasoned Angular developer or just starting, this guide will walk you through creating a new Angular 19 application using NgModule and then integrating a standalone component.

1. Create a New Angular App in

Generate a new Angular 19 application in no standalone mode:

ng new my-angular19-app --no-standalone

Navigate into the project:

cd my-angular19-app

2. What Are Standalone Components?

Standalone components are self-contained Angular components that do not require an NgModule. This feature simplifies application structure and improves tree-shaking, leading to better performance. A standalone component is defined using the standalone: true property in its decorator.

3. Generate a Standalone Component

Run the following command:

ng generate component my-standalone-component --standalone

or using shorthand:

ng g c my-standalone-component --standalone

This will generate:

• my-standalone-component.component.ts
• my-standalone-component.component.html
• my-standalone-component.component.scss
• my-standalone-component.component.spec.ts

The generated my-standalone-component.component.ts will look like this:

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

@Component({
  selector: 'app-my-standalone-component',
  standalone: true,
  templateUrl: './my-standalone-component.component.html',
  styleUrls: ['./my-standalone-component.component.scss']
})
export class MyStandaloneComponent {}

4. Benefits of Standalone Components

• Simplified Structure: No need to declare the component inside an NgModule.
• Better Tree Shaking: Unused modules are not bundled, improving performance.
• Easier Code Organization: Encourages modular development and reusability.

5. Using Standalone Components in NgModule

Despite the advantages of standalone components, many applications still rely on NgModule for features like dependency injection and feature modules. Fortunately, Angular 19 allows integrating standalone components into NgModule-based projects.

6. Importing Standalone Components in an NgModule

You can import a standalone component into an NgModule using the imports array:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HelloWorldComponent } from './hello-world.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HelloWorldComponent], // Importing standalone component
  bootstrap: [AppComponent]
})
export class AppModule {}

7. Using NgModule Services in a Standalone Component

Standalone components can still use services provided by an NgModule. To achieve this, ensure the service is provided in a module that gets imported:

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

@Injectable({
  providedIn: 'root'
})
export class MyService {
  getMessage() { return 'Hello from service!'; }
}

Now, use this service inside a standalone component:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyService } from './my-service';

@Component({
  selector: 'app-standalone-service',
  standalone: true,
  imports: [CommonModule],
  template: `<p></p>`
})
export class StandaloneServiceComponent {
  message: string;

  constructor(private myService: MyService) {
    this.message = this.myService.getMessage();
  }
}

Best Practices for Combining Standalone Components and NgModule

1. Use Standalone Components for New Features: If possible, build new features using standalone components to reduce complexity.
2. Gradual Migration: If working on an existing NgModule-based project, migrate components incrementally.
3. Modular Approach: Organize features as self-contained standalone components and only import them where needed.
4. Use Services Wisely: Provide services globally (providedIn: 'root') to make them accessible to both standalone and NgModule components.

Conclusion

Though applications created with Angular 19 do not have ngModule any longer, Angular 19 supports both NgModule and standalone components. Angular 19’s standalone components offer a powerful way to build lightweight and modular applications. However, many projects still rely on NgModule. Fortunately, Angular provides a seamless way to integrate both approaches, allowing developers to gradually adopt standalone components while maintaining existing architectures.

By understanding how to use standalone components within NgModule, you can optimize your Angular applications for better performance and maintainability. Happy coding!

For a ready-made project based on this guide, visit: GitHub Repository