Skip to main content

Modules

2025 standalone components over modules

Table of Contents​

  1. Modules
  • describe the injectable modules and services
  • identifies

The NgModule is a class and work with the @NgModule decorator function and also takes a metadata object that tells Angular how to compile and run module code.

The purpose of the module is to declare everything you create in Angular and group them together.

The NgModule is used to simplify the ways you define and manage the dependencies in your applications and also you can consolidate different components and services into associative blocks of functionality.

The imports at the top of the array are JavaScript import statements while the imports array within @NgModule is Angular specific. For more information on the difference, see JavaScript Modules vs. NgModules.

What is an Angular Module?​

the module is a container for different parts of an application. Global functions should be avoid in JavaScript, they can pollute the global namespace, easily overwritten, or destroyed by other scripts. Modules reduce this problem and can follow factory, service, and provider patterns.

The module system in Angular modularize code into reusable blocks. The application can contain multiple modules of different types. But it always has its entry point with the root module (AppModule). If working with the Angular module system it is essential to have a clear module structure. Whilst feature modules encapsulates blocks of codes that is not intended to be used outside that module makes feature modules a good candidate of a bounded context. Shared modules contain the most commonly used code that is modularized so it can be reused as much as possible. The root module can contain as many feature modules as required. The core module shares its content application wide as singleton.

  • found in app.module.ts
  • a function that organizes code for you
  • manages injectable objects
  • extend the app's capabilities by importing other modules
  • consolidate the components, directives, etc

Module Organization​

Examples

Core module: Application wide components and services as singleton e.g. HeaderComponent

Shared modules: Highly reusable components as multiple instances e.g. PaginatorComponent

Feature modules: Custom modules such as ProductModule (domain module) or SalesModule (bounded context)

Module Guidelines

  • Every component, directive and pipe must belong to one and only one module.
  • Never re-declare these elements in another module.
  • Except services, module contents are private by default. Use exports to manage visibility for private elements.
  • Do not share contents of a feature module, instead add reusable elements to a shared module.
  • Do not import shared modules into the root module or core module.
  • To retrieve the same service instance across feature modules and the root module, define .forRoot() and .forChild() as static methods in the module class. This is common for any reusable module library that requires a single service instance. The Angular RouterModule is a good example for this pattern.
  • the best practice is to place data files (like JSON) directly inside the feature modules that consume them. For instance, your publications.json should live inside app/features/publications. This makes the feature module self-contained and easy to lazy-load.

Generate Module CLI command​

npm run generate module {{moduleName}} -- --routing

Types of Angular Modules​

  • Angular’s Module architecture is a bit unique, and probably one of the hardest parts to fully grasp for beginners.
  • The most confusing concept about it is that we’re already using a module architecture on top of it: of course, I’m talking about ES imports.
  • Because Angular Modules add an additional layer of logical grouping, it’s important to keep them as much related as possible.
  • But knowing how to separate and split your app’s functionality in well-defined modules is a fundamental part of architecting Angular apps.

Different Types of Angular Modules​

  • Shared Modules
  • Feature Modules There are different types of Angular Modules you should be aware of:
  • Declarations/Widget Module (example: a module that is a collection of UI Components, Directives and Pipes)
  • Services Module (example: HttpClientModule)
  • Routing Module
  • Domain/Feature Module
  • Core/Shared Module