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 theimports
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:
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.
<!-- app.component.html -->
<h1>Welcome to My Angular Module Project!</h1>
<app-custom></app-custom>
<!-- custom.component.html -->
<div>
<h2>{{ message }}</h2>
</div>
//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';
}
//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 { }
//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 {
}
}
To start the application run the following command.
ng serve --open
Output:
Contact Us