Ultimate Angular Modules, Lazy Loading Guide With Best Practice

#angular #modules #lazyloading #webdev

When I first started building Angular applications, I put everything in the root AppModule. It worked fine for small apps, but as the application grew, the initial bundle size became huge, and the app took forever to load. That's when I learned about Angular modules and lazy loading, and it completely changed how I structure applications.

Angular modules are containers that organize related components, directives, pipes, and services. They help manage dependencies, organize code into logical units, and most importantly, enable lazy loading. Lazy loading means feature modules are only loaded when their routes are accessed, dramatically reducing the initial bundle size and improving startup time.

What are Angular Modules?

Angular Modules provide:

Code Organization - Group related components, services, and functionality
Dependency Management - Control what's available to other modules
Lazy Loading - Load modules on-demand for better performance
Encapsulation - Keep feature code isolated and maintainable
Reusability - Share components and services across modules

Root Module (AppModule)

The main application module that bootstraps your app:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Feature Module

Organize features into separate modules:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BusinessRoutingModule } from './business-routing.module';
import { BusinessListComponent } from './business-list.component';

@NgModule({
  declarations: [BusinessListComponent],
  imports: [
    CommonModule, // Use CommonModule instead of BrowserModule
    BusinessRoutingModule
  ]
})
export class BusinessModule { }

Lazy Loading

Implement lazy loading for feature modules:

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