Organizing the House: Root and Feature Modules in Angular

Discover how NgModules create a scalable and maintainable structure for any Angular application, from the smallest project to a large enterprise system.

🏠

Welcome! Let's see how an Angular app is organized using modules, starting with the foundation.

The Root Module (AppModule)

Every Angular app has a root module, conventionally named AppModule. Think of it as the main entrance to your house. It's responsible for launching the application and connecting all the other pieces together.

Feature Modules for Organization

As your application grows, you group related functionality into feature modules. This is like organizing your house into rooms (e.g., a `KitchenModule` for cooking, a `LivingRoomModule` for relaxing). It keeps your code clean and easier to manage.

The @NgModule Decorator

Modules are defined by a class decorated with @NgModule. This decorator is a function that takes a metadata object, telling Angular how to compile and run the module's code. It's the blueprint for that section of your app.

Communication: Imports & Exports

Modules communicate through the imports and exports arrays. A module imports other modules to use their components. A module exports its own components to make them available for other modules to use.

Practice Zone

Interactive Test 1: Module Roles

Drag the description to the correct module type.

Arrastra en el orden correspondiente.

Arrastra las opciones:

Groups specific functionality, like user profiles or products.

The main module that bootstraps the entire application.

Completa el código:

AppModule______

Feature Module______

Unlock with Premium

Interactive Test 2: Naming Conventions

Complete the module definitions by filling in the class names.

Rellena los huecos en cada casilla.

// Main App Module
@NgModule({...})
export class  { }

// Products Feature Module
@NgModule({...})
export class  { }

Unlock with Premium

Practice Example: Create & Import

Create a new `UsersModule` that declares and exports a `UsersListComponent`. Then, import it into the `AppModule`.

* Write the code below. Correct characters will be shown in green and incorrect ones in red.

// users.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UsersListComponent } from './users-list.component';

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

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { UsersModule } from './users/users.module'; // <-- Import

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    UsersModule // <-- Add to imports
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Unlock with Premium

Knowledge Check

Which property in @NgModule makes a component from one module available to another?

Unlock with Premium

Advanced Module Strategies

Properly structuring your modules is key to a high-performance, maintainable Angular application. Here are three common patterns.

1. Lazy Loading with Feature Modules

Instead of loading all code upfront, you can configure the Angular Router to "lazy load" a feature module only when the user navigates to its route. This dramatically improves initial load time.

// app-routing.module.ts
const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
  }
];

2. The Shared Module Pattern

Create a SharedModule to consolidate common components, directives, and pipes used across many other modules. You import this `SharedModule` wherever you need those common UI elements, avoiding duplicate code.

// shared.module.ts
@NgModule({
  declarations: [AvatarComponent, ButtonComponent],
  exports: [AvatarComponent, ButtonComponent] // Export for other modules
})

3. The Core Module for Services

A CoreModule is a special module you import only once in your `AppModule`. It's the perfect place for application-wide, singleton services (like authentication or logging) to prevent them from being accidentally provided multiple times.

// core.module.ts
@NgModule({
  providers: [AuthService, LoggerService]
})
export class CoreModule { }

NgModule Glossary

@NgModule: A decorator that marks a class as an Angular module and provides configuration metadata for it.
declarations: An array of components, directives, and pipes that belong to this module. They are private by default.
imports: An array of other modules whose exported classes are needed by component templates in this module.
exports: A subset of `declarations` that should be visible and usable in other modules that import this module.
providers: An array of services that this module contributes to the global collection of services; they become accessible in all parts of the app.
bootstrap: The main application view, called the root component, which hosts all other app views. Only the root module should set this property.