How to Use Imports in Module in Angular: Simple Guide

In Angular, use the imports array inside an @NgModule decorator to include other modules your module needs. This allows you to use components, directives, and services from those imported modules within your module.

Syntax

The imports array is part of the @NgModule decorator. You list other Angular modules here to make their exported features available in your module.

Each item in imports is a module class, like CommonModule or a custom module.

typescript

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

@NgModule({
  imports: [
    CommonModule
  ]
})
export class YourModule { }

Example

This example shows an Angular module importing CommonModule and a custom SharedModule. This lets components in YourModule use common Angular directives and shared components.

typescript

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from './shared/shared.module';
import { YourComponent } from './your.component';

@NgModule({
  declarations: [YourComponent],
  imports: [
    CommonModule,
    SharedModule
  ],
  exports: [YourComponent]
})
export class YourModule { }

Output

YourComponent can use Angular common directives like *ngIf and components from SharedModule.

Common Pitfalls

• Forgetting to import a module that exports needed components or directives causes errors like "component not recognized".
• Importing a module multiple times unnecessarily can bloat your app.
• Not exporting components from a module means they can't be used in modules that import it.

typescript

/* Wrong: Missing import of CommonModule causes *ngIf to fail */
import { NgModule } from '@angular/core';
import { YourComponent } from './your.component';

@NgModule({
  declarations: [YourComponent],
  imports: [], // CommonModule missing
})
export class YourModule { }

/* Right: Import CommonModule to use Angular directives */
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { YourComponent } from './your.component';

@NgModule({
  declarations: [YourComponent],
  imports: [CommonModule],
})
export class YourModule { }

Quick Reference

Tips for using imports in Angular modules:

• Always import CommonModule in feature modules to use common directives.
• Import shared modules to reuse components and services.
• Only import modules once in the app to avoid duplication.
• Use exports in a module to make components available to importing modules.

Key Takeaways

Use the imports array in @NgModule to include other Angular modules your module needs.

Import CommonModule in feature modules to access common Angular directives like *ngIf and *ngFor.

Import shared or custom modules to reuse components and services across your app.

Avoid missing imports to prevent errors about unknown components or directives.

Export components in a module to make them usable in modules that import it.