How to import and export modules in Angular
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Importing and exporting modules in Angular enables modular application architecture by allowing you to organize features into separate modules and share functionality across the application. As the creator of CoreUI, a widely used open-source UI library, I’ve structured countless Angular applications using proper module imports and exports for scalable enterprise solutions. From my expertise, the most effective approach is using imports array for dependencies and exports array for sharing components with other modules. This method provides clear module boundaries and efficient dependency management.
Use imports array to bring in dependencies and exports array to make components available to other modules.
import { NgModule } from '@angular/core'
import { CommonModule } from '@angular/common'
import { RouterModule } from '@angular/router'
import { UserListComponent } from './user-list.component'
import { UserDetailComponent } from './user-detail.component'
import { SharedModule } from '../shared/shared.module'
@NgModule({
declarations: [
UserListComponent,
UserDetailComponent
],
imports: [
CommonModule,
RouterModule,
SharedModule
],
exports: [
UserListComponent,
UserDetailComponent
]
})
export class UserModule { }
The imports array specifies modules that this module depends on, making their exported functionality available within this module. The exports array specifies which components, directives, or pipes should be available to modules that import this module. CommonModule is typically imported in feature modules for basic Angular directives.
Best Practice Note:
This is the same module import/export pattern we use in CoreUI Angular components for clean module architecture and proper dependency management.
