Streamlining Your Angular 17 App: How to Import Modules in Standalone Components

In Angular before version 17, components were typically declared and used within NgModule classes. These modules served as containers for components, directives, pipes, and providers. To import another module, you'd use the imports array within the NgModule decorator:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyComponent } from './my.component';

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

Standalone Components in Angular 17:

Angular 17 introduced standalone components, which provide a more lightweight and flexible way to structure your application. These components don't require a surrounding NgModule.

Importing Modules in Standalone Components:

When working with standalone components, you import the required modules directly into the component file where they're used:

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

@Component({
  selector: 'app-my-standalone-component',
  template: `
    <p>This component uses CommonModule for directives like *ngIf.</p>
  `
})
export class MyStandaloneComponent { }

Key Points:

• Import modules only in the components that need them. This helps reduce bundle size for components that don't rely on those modules.
• Standalone components can still import directives, pipes, and providers from the imported modules.
• This approach might lead to more import statements spread across your components, but it offers better code organization and potentially smaller bundle sizes.

Additional Considerations:

• If you have a module with shared components, directives, or pipes, you can create a standalone library and import it into your standalone components as needed.
• For more complex scenarios, you might still consider using NgModules for advanced features like lazy loading or dependency injection.

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

@Component({
  selector: 'app-standalone-with-common',
  template: `
    <p *ngIf="showThis">This component uses *ngIf from CommonModule.</p>
    <button (click)="showThis = !showThis">Toggle</button>
  `
})
export class StandaloneWithCommonComponent {
  showThis = true;
}

In this example, CommonModule is imported directly into StandaloneWithCommonComponent. This allows us to use the *ngIf directive in the template.

// custom-directive.directive.ts (assuming a custom directive)
import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';

@Directive({ selector: '[appHighlight]' })
export class HighlightDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.renderer.setStyle(this.el.nativeElement, 'background-color', 'lightblue');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.renderer.setStyle(this.el.nativeElement, 'background-color', 'transparent');
  }
}

// custom-module.module.ts
import { NgModule } from '@angular/core';
import { HighlightDirective } from './custom-directive.directive';

@NgModule({
  declarations: [HighlightDirective],
  exports: [HighlightDirective] // Make the directive available for export
})
export class CustomModule { }

// standalone-component.component.ts
import { Component } from '@angular/core';
import { CustomModule } from './custom-module'; // Import the custom module

@Component({
  selector: 'app-standalone-with-custom',
  template: `
    <p appHighlight>This text highlights on hover (using a custom directive).</p>
  `,
  imports: [CustomModule] // Import the custom module here
})
export class StandaloneWithCustomComponent { }

This example demonstrates importing a custom module (CustomModule) that contains a directive (HighlightDirective) into the StandaloneWithCustomComponent. This allows us to use the custom directive in the component's template.

1. Leveraging Existing NgModules:

   • If you have existing NgModules containing components, directives, or pipes you need in your standalone component, you can directly import the NgModule itself. This allows you to reuse the NgModule's configuration for managing those dependencies.

   import { Component } from '@angular/core';
   import { MatButtonModule } from '@angular/material/button'; // Existing NgModule
   
   @Component({
     selector: 'app-standalone-with-material',
     template: `
       <button mat-button>Click me (using Material button)</button>
     `,
     imports: [MatButtonModule] // Import the existing NgModule
   })
   export class StandaloneWithMaterialComponent { }
   

2. Creating Standalone Libraries:

   • For reusable components, directives, or pipes, consider creating a standalone library using the Angular CLI's ng generate library command. This creates a library project with its own NgModule to manage dependencies for those components. Then, in your standalone component, you can import the entire library.

   Standalone Library Project:

   ng generate library my-standalone-library
   

   Using the Standalone Library in a Standalone Component:

   import { Component } from '@angular/core';
   import { MyStandaloneComponent } from 'my-standalone-library'; // Import the library
   
   @Component({
     selector: 'app-using-standalone-library',
     template: `
       <my-standalone></my-standalone>  `,
     imports: [MyStandaloneLibraryModule] // Import the library's module if provided
   })
   export class UsingStandaloneLibraryComponent { }
   

   This approach promotes reusability and potentially smaller bundle sizes, as components in the library can be imported only where needed.