angular-module-design

name	angular-module-design
description	Design Angular modules using feature modules, lazy loading, and dependency injection. Use when organizing large Angular applications with proper separation of concerns.

Angular Module Design

Overview

Architect scalable Angular applications using feature modules, lazy loading, services, and RxJS for reactive programming patterns.

When to Use

• Large Angular applications
• Feature-based organization
• Lazy loading optimization
• Dependency injection patterns
• Reactive state management

Implementation Examples

1. Feature Module Structure

// users.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { UsersRoutingModule } from './users-routing.module';
import { UsersListComponent } from './components/users-list/users-list.component';
import { UserDetailComponent } from './components/user-detail/user-detail.component';
import { UsersService } from './services/users.service';

@NgModule({
  declarations: [UsersListComponent, UserDetailComponent],
  imports: [CommonModule, ReactiveFormsModule, UsersRoutingModule],
  providers: [UsersService]
})
export class UsersModule {}

2. Lazy Loading Routes

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './components/dashboard/dashboard.component';

const routes: Routes = [
  { path: '', component: DashboardComponent },
  {
    path: 'users',
    loadChildren: () => import('./features/users/users.module')
      .then(m => m.UsersModule)
  },
  {
    path: 'products',
    loadChildren: () => import('./features/products/products.module')
      .then(m => m.ProductsModule)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

3. Service with RxJS

// users.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable, throwError } from 'rxjs';
import { map, catchError, tap } from 'rxjs/operators';

interface User {
  id: number;
  name: string;
  email: string;
}

@Injectable({ providedIn: 'root' })
export class UsersService {
  private usersSubject = new BehaviorSubject<User[]>([]);
  public users$ = this.usersSubject.asObservable();

  constructor(private http: HttpClient) {}

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>().(
      ( ..(users)),
      ( {
        .(, error);
         (  ());
      })
    );
  }

  (: ): <> {
     ..<>();
  }

  (: <, >): <> {
     ..<>(, user).(
      ( {
         currentUsers = ..;
        ..([...currentUsers, newUser]);
      })
    );
  }

  (: , : ): <> {
     ..<>(, user).(
      ( {
         currentUsers = ..;
         index = currentUsers.( u. === id);
         (index !== -) {
          currentUsers[index] = updatedUser;
          ..([...currentUsers]);
        }
      })
    );
  }

  (: ): <> {
     ..<>().(
      ( {
         currentUsers = ..;
        ..(currentUsers.( u. !== id));
      })
    );
  }
}

4. Smart and Presentational Components

// users-list.component.ts (Smart)
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { UsersService } from '../../services/users.service';

interface User {
  id: number;
  name: string;
  email: string;
}

@Component({
  selector: 'app-users-list',
  template: `
    <div>
      <h2>Users</h2>
      <button (click)="addUser()">Add User</button>
      <app-user-item
        *ngFor="let user of users$ | async"
        [user]="user"
        (delete)="deleteUser($event)"
      ></app-user-item>
    </div>
  `
})
export class UsersListComponent implements OnInit {
  users$: Observable<User[]>;

  constructor(private usersService: UsersService) {
    this.users$ = this.usersService.users$;
  }

  ngOnInit(): void {
    this.usersService.().();
  }

  ():  {
    
  }

  (: ):  {
    ..(id).();
  }
}


 { , , ,  }  ;

  {
  : ;
  : ;
  : ;
}

({
  : ,
  : ,
  : []
})
   {
  () user!: ;
  ()  =  <>();

  ():  {
    ..(..);
  }
}

5. Dependency Injection and Providers

// config.service.ts
import { Injectable } from '@angular/core';

interface AppConfig {
  apiUrl: string;
  environment: string;
}

@Injectable({ providedIn: 'root' })
export class ConfigService {
  private config: AppConfig = {
    apiUrl: 'https://api.example.com',
    environment: 'production'
  };

  get(key: keyof AppConfig): any {
    return this.config[key];
  }
}

// app.module.ts with providers
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { ConfigService } from './services/config.service';
import { AuthInterceptor }  ;

({
  : [, ],
  : [
    ,
    { : , : , :  }
  ]
})
   {}

Best Practices

• Organize by feature modules
• Use lazy loading for large features
• Implement smart/presentational component pattern
• Use services for data and business logic
• Leverage RxJS for reactive patterns
• Use dependency injection for loose coupling
• Implement HTTP interceptors for global handling
• Use typed services and models

Resources

• Angular Documentation
• Angular Modules Guide
• RxJS Documentation
• Angular Services