Enterprise Angular Patterns

Proven architectural patterns for building scalable Angular applications in enterprise environments with teams of 5-100+ developers.

Pattern 1: Core-Shared-Features Structure

Overview

Organize code into three main categories based on scope and reusability.

The Three Folders

src/app/
├── core/          # App-wide singletons (loaded once)
├── shared/        # Reusable components/utilities
└── features/      # Feature modules (lazy loaded)

Core Module Rules

What belongs in core:

• ✅ Singleton services (AuthService, ApiService, CacheService)
• ✅ HTTP interceptors (auth, error handling, retry)
• ✅ Route guards (authentication, authorization)
• ✅ Global error handlers
• ✅ App-wide models and interfaces
• ✅ Constants and configuration

What does NOT belong:

• ❌ UI components
• ❌ Feature-specific services
• ❌ Reusable utilities (those go in shared)

Example:

// core/services/auth.service.ts
@Injectable({ providedIn: 'root' })
export class AuthService {
  private currentUser$ = new BehaviorSubject<User | null>(null);
  
  login(credentials: Credentials): Observable<User> {
    return this.http.post<User>('/api/auth/login', credentials).pipe(
      tap(user => this.currentUser$.next(user))
    );
  }
  
  getCurrentUser(): Observable<User | null> {
    return this.currentUser$.asObservable();
  }
}

Shared Module Rules

What belongs in shared:

• ✅ Dumb/presentational components (buttons, c

…(truncated)

Router-First Methodology

Author: Doguhan Uluca
Source: Angular for Enterprise Applications, 3rd Edition
Context: Enterprise Angular architecture for teams of 5-100+ developers

Why Router-First?

Traditional development often starts with components, leading to:

• ❌ Unclear application structure
• ❌ Tight coupling between features
• ❌ Difficult to refactor later
• ❌ Hard to parallelize team work
• ❌ Performance issues at scale

Router-First solves this by:

• ✅ Forcing architectural decisions early
• ✅ Creating clear feature boundaries
• ✅ Enabling lazy loading from the start
• ✅ Facilitating team collaboration
• ✅ Making the app structure visible in code

The 7 Steps

Step 1: Develop a Roadmap and Scope

Goal: Define what features your application needs

Process:

1. List all user-facing features
2. Identify MVP vs. future features
3. Group related functionality
4. Define user roles and permissions

Example:

E-commerce App Roadmap:

Phase 1 (MVP):
- Product browsing
- Shopping cart
- Checkout
- User authentication

Phase 2:
- Order history
- Product reviews
- Wishlist
- Admin panel

Phase 3:
- Analytics dashboard
- Inventory management
- Customer support

Output: Feature list with priorities

Step 2: Design with Lazy Loading in Mind

Goal: Plan bundle structure for optimal performance

Process:

1. Each major feature = separate lazy-loaded module
2. Identify shared dependencies
3. Plan loading strategies

…(truncated)