Angular Modules

1. What is an Angular Module?

An Angular module is a container that encapsulates a set of functionalities. The main module in every Angular application is the AppModule (app.module.ts).

Key Features of Angular Modules

✅ Organizes the application into logical units
✅ Makes the application more modular and reusable
✅ Enables lazy loading for better performance
✅ Provides dependency injection for services

2. Creating an Angular Module

Step 1: Generate a New Module

Use the Angular CLI to create a module:

ng generate module my-module

OR (shorter version)

ng g m my-module

3. Understanding Module Structure

Open my-module.module.ts. It looks like this:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ]
})
export class MyModule { }

Step 2: Import and Export Components

To use a component inside this module, import it:

import { MyComponent } from './my-component/my-component.component';

@NgModule({
  declarations: [MyComponent], // Declare components here
  imports: [CommonModule],
  exports: [MyComponent] // Export components for use in other modules
})
export class MyModule { }

4. Importing a Module in AppModule

Step 3: Add Module to `app.module.ts`

To use MyModule, import it into app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MyModule } from './my-module/my-module.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MyModule // Import the custom module
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

ng g m user

Now, move user.component.ts inside user.module.ts:

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 { }

6. Lazy Loading with Modules

Lazy loading helps improve performance by loading modules only when needed.

Step 5: Configure Lazy Loading in Routing

Modify app-routing.module.ts:

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

Conclusion

✔️ Angular Modules help structure applications
✔️ Created and used a custom module
✔️ Divided the app into feature modules
✔️ Implemented lazy loading for better performance

Using modules correctly leads to clean, maintainable, and scalable Angular applications! 🚀

ANGULAR