How do you import a module into another module Angular?

Angular applications are modular by design, allowing you to break down complex functionalities into smaller, manageable pieces called modules. One common task in Angular development is importing modules into other modules to make their components, directives, pipes, and services available throughout the application. This article explores the process of importing modules into another module in Angular.

What is a Module in Angular?

In Angular, modules are containers for organizing application components, directives, pipes, and services. Modules encapsulate related functionality and provide a context for dependency injection.

Importing Module into Another:

When one module needs to access the components or services provided by another module, it imports that module using the imports array in the @NgModule decorator.

Syntax:

The syntax for importing a module into another module in Angular is as follows:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; // Importing the module to be used
import { MyComponent } from './my-component'; // Importing components from the module

@NgModule({
  declarations: [MyComponent], // Declaring components, directives, and pipes
  imports: [CommonModule], // Importing other modules
  exports: [MyComponent] // Exporting components, directives, and pipes
})
export class MyModule { }

Advantages for importing a module into another module

Dependency Management: Importing modules allows Angular's dependency injection system to resolve and inject the services provided by those modules into components and other dependencies within the importing module.
Encapsulation: Modules encapsulate related functionality, promoting code organization and reusability. Importing modules into other modules allows for modular development and separation of concerns.
Shared Functionality: Importing modules enables sharing of components, directives, pipes, and services across different parts of the application. This promotes code reuse and helps maintain a consistent user experience.

Approach

Identify the Module to Import: Determine which module contains the components, directives, pipes, or services you want to use in another module. This could be a custom module you've created or a third-party module installed via npm.
Import the Module: In the module where you want to use the functionalities from the other module, import it using the import statement. Ensure that you provide the correct path to the module file.
Add the Imported Module to the imports Array: Within the @NgModule decorator of the importing module, add the imported module to the imports array. This makes the exported features of the imported module available for use within the importing module.
Optionally Use Imported Features: Once the module is imported and added to the imports array, you can use its components, directives, pipes, or services within the importing module as needed.

Steps to Create Angular Application

Step 1: Create a new Angular project

Open your terminal or command prompt and run the following command to create a new Angular project:

ng new import-module

Step 2: Generate a module using the following command.

ng generate module custom

Step 3: Create a component using the following command.

ng generate component custom/custom

Folder Structure:

Folder Structure

Dependencies:

 "dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/router": "^17.3.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  }

Example: This example demonstrates importing module in other modules in Angular.

HTML

<!-- app.component.html -->

<h1>Welcome to My Angular Module Project!</h1>

<app-custom></app-custom>

HTML

<!-- custom.component.html -->

<div>
    <h2>{{ message }}</h2>
</div>

JavaScript

//app.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { CustomModule } from './custom/custom.module';
@Component({
    selector: 'app-root',
    imports: [RouterOutlet, CustomModule],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent {
    title = 'import-module';
}

JavaScript

//custom.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {CustomComponent} from './custom/custom.component'

@NgModule({
    declarations: [CustomComponent],
    imports: [
        CommonModule
    ],
    exports: [CustomComponent]
})
export class CustomModule { }

JavaScript

//custom.component.ts

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

@Component({
    selector: 'app-custom',
    standalone: true,
    imports: [],
    templateUrl: './custom.component.html',
    styleUrl: './custom.component.css'
})
export class CustomComponent {
    message: string = "Welcome to Custom Module!";

    constructor() { }

    ngOnInit(): void {
    }
}