Angular Modules - Textnotes

Angular Modules

In Angular, modules help organize your application into cohesive blocks of functionality. Every Angular app has at least one module called the root module, and additional modules can be created for features, shared functionality, or lazy loading.

1. Root Module (AppModule)

Every Angular application starts with a root module called AppModule.

It is defined in app.module.ts.

Example:


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';

@NgModule({
declarations: [
AppComponent,
HomeComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
  1. declarations – Components, directives, and pipes that belong to this module
  2. imports – Other modules required by this module
  3. providers – Services available to the module
  4. bootstrap – Root component that Angular loads first

2. Feature Modules

Feature modules are used to organize related components, services, and other code into a logical group.

Example: UserModule, ProductModule.


import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserComponent } from './user.component';

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

Benefits:

  1. Keeps the app organized
  2. Improves maintainability
  3. Makes code reusable

3. Shared Modules

Shared modules contain components, directives, pipes, or services that are used across multiple modules.

Example: SharedModule can include a HeaderComponent, FooterComponent, and commonly used pipes.


@NgModule({
declarations: [HeaderComponent, FooterComponent],
imports: [CommonModule],
exports: [HeaderComponent, FooterComponent, CommonModule]
})
export class SharedModule { }

4. Lazy Loading Modules

Lazy loading modules improves performance by loading modules only when needed instead of loading everything at startup.

Example:

app-routing.module.ts


const routes: Routes = [
{ path: 'user', loadChildren: () => import('./user/user.module').then(m => m.UserModule) }
];

Benefits:

  1. Reduces initial load time
  2. Improves app scalability

5. NgModule Metadata

Every module in Angular uses the @NgModule decorator with metadata:

  1. declarations – Components, directives, and pipes inside the module
  2. imports – Other modules needed
  3. exports – Components, directives, and pipes made available to other modules
  4. providers – Services for dependency injection
  5. bootstrap – Root component to load at startup (only in root module)

@NgModule({
declarations: [AppComponent, HomeComponent],
imports: [BrowserModule, SharedModule],
providers: [AuthService],
bootstrap: [AppComponent]
})
export class AppModule { }

Summary

  1. Angular modules organize the application into cohesive blocks.
  2. AppModule is the root module loaded at startup.
  3. Feature modules group related functionality.
  4. Shared modules provide reusable components and services.
  5. Lazy loading modules improve performance.
  6. @NgModule metadata defines declarations, imports, exports, providers, and bootstrap components.