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)
Managing module imports and exports is fundamental for organizing Angular applications into reusable, maintainable pieces and creating component libraries.
As the creator of CoreUI, a widely used open-source UI library, I’ve architected modular Angular applications and component libraries over 25 years of development.
From my expertise, the most effective approach is using the imports array to bring in external modules and the exports array to make components available to other modules.
This creates a clean modular architecture that promotes code reuse and maintainability.
Use imports array to include external modules and exports array to share components.
@NgModule({
imports: [CommonModule, FormsModule],
declarations: [MyComponent],
exports: [MyComponent]
})
export class MyModule { }
Here the imports array includes CommonModule for basic Angular directives and FormsModule for form functionality. The declarations array registers MyComponent within this module. The exports array makes MyComponent available to any module that imports MyModule, enabling component reuse across the application.
Best Practice Note:
This is the same module organization pattern we use in CoreUI Angular components for maximum reusability and clean architecture. Only export components that should be used outside the module, keep internal components private by excluding them from exports, and use feature modules to organize related functionality.
