16. Standalone Components Deep Dive

Standalone Components Overview

Estimated Time: 2 hours | Difficulty: Intermediate | Prerequisites: Components, Modules

Standalone components are Angular’s modern approach to building applications without NgModules. Introduced in Angular 14 and becoming the default in Angular 17+, they simplify the mental model and improve tree-shaking. If you have ever been confused about why you had to declare a component in one module, import that module into another module, and then export the component from the first module just to use it — standalone components are the answer. With the traditional NgModule system, the dependency graph lived in module files that were often hundreds of lines long and hard to reason about. Standalone components make each component self-describing: open the file, and the imports array tells you exactly what that component depends on. No more hunting through module files to figure out why something is or is not available.

┌─────────────────────────────────────────────────────────────────────────┐
│              Traditional vs Standalone Architecture                     │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                          │
│   TRADITIONAL (NgModule-based)          STANDALONE (Modern)             │
│   ─────────────────────────────         ─────────────────────           │
│                                                                          │
│   ┌─────────────────────────┐          ┌─────────────────────────┐     │
│   │      AppModule          │          │   bootstrapApplication   │     │
│   │  ┌─────────────────┐    │          │                          │     │
│   │  │ declarations:   │    │          │   ┌─────────────────┐    │     │
│   │  │ - Component1    │    │          │   │  AppComponent   │    │     │
│   │  │ - Component2    │    │          │   │  standalone:true│    │     │
│   │  │ - Directive1    │    │          │   │  imports: [...]  │    │     │
│   │  ├─────────────────┤    │          │   └─────────────────┘    │     │
│   │  │ imports:        │    │    →     │            │              │     │
│   │  │ - SharedModule  │    │          │   ┌────────┴────────┐    │     │
│   │  │ - RouterModule  │    │          │   ▼                 ▼    │     │
│   │  └─────────────────┘    │          │ Component1     Component2│     │
│   └─────────────────────────┘          │ standalone     standalone│     │
│                                         └─────────────────────────┘     │
│                                                                          │
│   Benefits of Standalone:                                                │
│   • Simpler mental model - no NgModule boilerplate                      │
│   • Better tree-shaking - components declare their own dependencies     │
│   • Easier lazy loading - any component can be lazy loaded              │
│   • Improved testing - less setup required                               │
│   • Clear dependency graph - imports are explicit                        │
│                                                                          │
└─────────────────────────────────────────────────────────────────────────┘

Creating Standalone Components

Basic Standalone Component

// user-card.component.ts
import { Component, input, output } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink } from '@angular/router';

@Component({
  selector: 'app-user-card',
  standalone: true,  // ← Marks this as standalone
  imports: [         // ← Declare dependencies directly
    CommonModule,
    RouterLink
  ],
  template: `
    <div class="user-card">
      <img [src]="user().avatar" [alt]="user().name" />
      <h3>{{ user().name }}</h3>
      <p>{{ user().email }}</p>
      <a [routerLink]="['/users', user().id]">View Profile</a>
      <button (click)="selected.emit(user())">Select</button>
    </div>
  `,
  styles: [`
    .user-card {
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      padding: 16px;
    }
  `]
})
export class UserCardComponent {
  user = input.required<User>();
  selected = output<User>();
}

Standalone Component with Providers

// analytics-dashboard.component.ts
@Component({
  selector: 'app-analytics-dashboard',
  standalone: true,
  imports: [
    CommonModule,
    ChartComponent,
    MetricCardComponent,
    DateRangePickerComponent
  ],
  providers: [
    // Component-level providers
    AnalyticsService,
    { provide: DATE_FORMAT, useValue: 'yyyy-MM-dd' },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AnalyticsInterceptor,
      multi: true
    }
  ],
  template: `
    <div class="dashboard">
      <app-date-range-picker 
        [range]="dateRange()" 
        (rangeChange)="updateRange($event)" 
      />
      
      <div class="metrics-grid">
        @for (metric of metrics(); track metric.id) {
          <app-metric-card [metric]="metric" />
        }
      </div>
      
      <app-chart [data]="chartData()" [type]="'line'" />
    </div>
  `
})
export class AnalyticsDashboardComponent {
  private analytics = inject(AnalyticsService);
  
  dateRange = signal({ start: startOfMonth(new Date()), end: new Date() });
  metrics = signal<Metric[]>([]);
  chartData = signal<ChartData | null>(null);
  
  constructor() {
    effect(() => {
      this.loadData(this.dateRange());
    });
  }
  
  async loadData(range: DateRange) {
    const [metrics, chart] = await Promise.all([
      this.analytics.getMetrics(range),
      this.analytics.getChartData(range)
    ]);
    this.metrics.set(metrics);
    this.chartData.set(chart);
  }
  
  updateRange(range: DateRange) {
    this.dateRange.set(range);
  }
}

Standalone Directives & Pipes

Standalone Directive

// highlight.directive.ts
import { Directive, ElementRef, input, effect, inject } from '@angular/core';

@Directive({
  selector: '[appHighlight]',
  standalone: true
})
export class HighlightDirective {
  private el = inject(ElementRef);
  
  color = input<string>('yellow', { alias: 'appHighlight' });
  
  constructor() {
    effect(() => {
      this.el.nativeElement.style.backgroundColor = this.color();
    });
  }
}

// Usage - import directly where needed
@Component({
  standalone: true,
  imports: [HighlightDirective],
  template: `
    <p [appHighlight]="'lightblue'">Highlighted text</p>
  `
})
export class SomeComponent {}

Standalone Pipe

// time-ago.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
import { formatDistanceToNow } from 'date-fns';

@Pipe({
  name: 'timeAgo',
  standalone: true,
  pure: true
})
export class TimeAgoPipe implements PipeTransform {
  transform(date: Date | string | null): string {
    if (!date) return '';
    const d = typeof date === 'string' ? new Date(date) : date;
    return formatDistanceToNow(d, { addSuffix: true });
  }
}

// relative-time.pipe.ts - Impure pipe for live updates
@Pipe({
  name: 'relativeTime',
  standalone: true,
  pure: false  // Re-evaluates on every change detection
})
export class RelativeTimePipe implements PipeTransform {
  private currentTime = signal(new Date());
  
  constructor() {
    // Update every minute
    setInterval(() => this.currentTime.set(new Date()), 60000);
  }
  
  transform(date: Date | string): string {
    // Uses currentTime signal to trigger updates
    this.currentTime(); // Subscribe to changes
    return formatDistanceToNow(new Date(date), { addSuffix: true });
  }
}

Bootstrapping Standalone Applications

Modern Application Bootstrap

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, withViewTransitions } from '@angular/router';
import { provideHttpClient, withInterceptors, withFetch } from '@angular/common/http';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { AppComponent } from './app/app.component';
import { routes } from './app/app.routes';
import { authInterceptor } from './app/core/interceptors/auth.interceptor';
import { errorInterceptor } from './app/core/interceptors/error.interceptor';

bootstrapApplication(AppComponent, {
  providers: [
    // Routing
    provideRouter(
      routes,
      withViewTransitions(),
      withComponentInputBinding(),
      withRouterConfig({
        onSameUrlNavigation: 'reload',
        paramsInheritanceStrategy: 'always'
      })
    ),
    
    // HTTP
    provideHttpClient(
      withFetch(),                    // Use fetch API
      withInterceptors([              // Functional interceptors
        authInterceptor,
        errorInterceptor,
        loggingInterceptor
      ])
    ),
    
    // Animations
    provideAnimationsAsync(),
    
    // App-wide services
    provideAppConfig(),
    provideAuth(),
    provideAnalytics()
  ]
}).catch(err => console.error(err));

Provider Functions Pattern

The provide*() function pattern is how Angular’s own APIs are structured (provideRouter, provideHttpClient, etc.) and it is the recommended way to package your own application-wide configuration. Instead of scattering provider arrays across your codebase, you create a single function that encapsulates all the pieces a feature needs — services, tokens, initializers — and returns them as a unit.

// providers/app-config.provider.ts
import { EnvironmentProviders, makeEnvironmentProviders, InjectionToken } from '@angular/core';

export interface AppConfig {
  apiUrl: string;
  environment: 'development' | 'staging' | 'production';
  features: {
    darkMode: boolean;
    analytics: boolean;
    newDashboard: boolean;
  };
}

export const APP_CONFIG = new InjectionToken<AppConfig>('APP_CONFIG');

export function provideAppConfig(config?: Partial<AppConfig>): EnvironmentProviders {
  const defaultConfig: AppConfig = {
    apiUrl: 'https://api.example.com',
    environment: 'development',
    features: {
      darkMode: true,
      analytics: true,
      newDashboard: false
    }
  };
  
  return makeEnvironmentProviders([
    {
      provide: APP_CONFIG,
      useValue: { ...defaultConfig, ...config }
    },
    ConfigService,
    FeatureFlagService
  ]);
}

// providers/auth.provider.ts
export function provideAuth(options?: AuthOptions): EnvironmentProviders {
  return makeEnvironmentProviders([
    AuthService,
    TokenStorageService,
    {
      provide: AUTH_CONFIG,
      useValue: {
        tokenKey: options?.tokenKey ?? 'auth_token',
        refreshThreshold: options?.refreshThreshold ?? 300,
        loginUrl: options?.loginUrl ?? '/auth/login'
      }
    },
    {
      provide: APP_INITIALIZER,
      useFactory: (auth: AuthService) => () => auth.initialize(),
      deps: [AuthService],
      multi: true
    }
  ]);
}

Lazy Loading Standalone Components

Lazy loading was possible with NgModules, but it required wrapping components in a module just to make them lazy-loadable. With standalone components, any component can be lazy loaded directly via loadComponent. This is one of the biggest practical wins of the standalone architecture — you no longer need to create a module for the sole purpose of enabling lazy loading.

loadComponent vs loadChildren: Use loadComponent when you want to lazy-load a single component (a page, a dialog). Use loadChildren when you want to lazy-load an entire route tree with nested child routes. Both use the same dynamic import() mechanism under the hood.

Route-Level Lazy Loading

// app.routes.ts
export const routes: Routes = [
  {
    path: '',
    loadComponent: () => import('./features/home/home.component')
      .then(m => m.HomeComponent)
  },
  {
    path: 'dashboard',
    loadComponent: () => import('./features/dashboard/dashboard.component')
      .then(m => m.DashboardComponent),
    canActivate: [authGuard]
  },
  {
    path: 'admin',
    loadChildren: () => import('./features/admin/admin.routes')
      .then(m => m.ADMIN_ROUTES),
    canMatch: [adminGuard]
  },
  {
    path: 'products',
    loadChildren: () => import('./features/products/products.routes')
      .then(m => m.PRODUCTS_ROUTES)
  }
];

// features/admin/admin.routes.ts
export const ADMIN_ROUTES: Routes = [
  {
    path: '',
    loadComponent: () => import('./admin-layout.component')
      .then(m => m.AdminLayoutComponent),
    children: [
      {
        path: '',
        loadComponent: () => import('./admin-dashboard.component')
          .then(m => m.AdminDashboardComponent)
      },
      {
        path: 'users',
        loadComponent: () => import('./user-management.component')
          .then(m => m.UserManagementComponent)
      },
      {
        path: 'settings',
        loadComponent: () => import('./admin-settings.component')
          .then(m => m.AdminSettingsComponent)
      }
    ]
  }
];

Dynamic Component Loading

// dynamic-loader.component.ts
@Component({
  selector: 'app-dynamic-loader',
  standalone: true,
  template: `
    <ng-container #outlet />
    @if (loading()) {
      <div class="loading-overlay">
        <app-spinner />
      </div>
    }
  `
})
export class DynamicLoaderComponent {
  componentType = input.required<string>();
  componentData = input<unknown>();
  
  @ViewChild('outlet', { read: ViewContainerRef }) outlet!: ViewContainerRef;
  
  loading = signal(false);
  
  private componentMap: Record<string, () => Promise<Type<any>>> = {
    'chart': () => import('./components/chart.component').then(m => m.ChartComponent),
    'table': () => import('./components/table.component').then(m => m.TableComponent),
    'form': () => import('./components/form.component').then(m => m.FormComponent),
    'widget': () => import('./components/widget.component').then(m => m.WidgetComponent)
  };
  
  constructor() {
    effect(() => {
      this.loadComponent(this.componentType());
    });
  }
  
  private async loadComponent(type: string) {
    const loader = this.componentMap[type];
    if (!loader) {
      console.error(`Unknown component type: ${type}`);
      return;
    }
    
    this.loading.set(true);
    this.outlet.clear();
    
    try {
      const component = await loader();
      const componentRef = this.outlet.createComponent(component);
      
      // Pass data to component if it has an input
      if (this.componentData() && 'data' in componentRef.instance) {
        componentRef.setInput('data', this.componentData());
      }
    } finally {
      this.loading.set(false);
    }
  }
}

Migrating from NgModules

Migration Strategy

┌─────────────────────────────────────────────────────────────────────────┐
│              NgModule to Standalone Migration Strategy                   │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                          │
│   Phase 1: Prepare                                                       │
│   ─────────────────                                                      │
│   1. Update to Angular 17+                                               │
│   2. Identify leaf components (no other components depend on them)      │
│   3. Create migration plan (bottom-up approach)                          │
│                                                                          │
│   Phase 2: Convert Shared Module                                         │
│   ─────────────────────────────                                          │
│   1. Mark all pipes, directives, components as standalone               │
│   2. Update imports in each standalone item                              │
│   3. Export individual items instead of module                           │
│                                                                          │
│   Phase 3: Convert Feature Modules                                       │
│   ───────────────────────────────                                        │
│   1. Convert components bottom-up                                        │
│   2. Replace module routing with route files                             │
│   3. Update lazy loading to loadComponent/loadChildren                   │
│                                                                          │
│   Phase 4: Remove AppModule                                              │
│   ──────────────────────────                                             │
│   1. Move providers to bootstrapApplication                              │
│   2. Convert AppComponent to standalone                                  │
│   3. Update main.ts to use bootstrapApplication                          │
│   4. Delete AppModule                                                    │
│                                                                          │
└─────────────────────────────────────────────────────────────────────────┘

Migration pitfall: The most common issue during NgModule-to-standalone migration is missing imports. In an NgModule world, a component might use NgIf without explicitly importing it because the parent module imported CommonModule. When you make that component standalone, you must add CommonModule (or the individual NgIf directive) to its own imports array. The automated migration schematic handles most cases, but always run your tests after each phase to catch what it misses.

Automated Migration

# Use Angular CLI schematic for migration -- run the three steps in order
ng generate @angular/core:standalone

# Options:
# --path: Specific path to migrate
# --mode: 'convert-to-standalone' | 'prune-ng-modules' | 'standalone-bootstrap'

# Step 1: Convert components to standalone
ng generate @angular/core:standalone --mode=convert-to-standalone

# Step 2: Remove unnecessary NgModules
ng generate @angular/core:standalone --mode=prune-ng-modules

# Step 3: Switch to standalone bootstrap
ng generate @angular/core:standalone --mode=standalone-bootstrap

Manual Migration Example

// BEFORE: NgModule-based
// shared.module.ts
@NgModule({
  declarations: [
    ButtonComponent,
    CardComponent,
    HighlightDirective,
    TimeAgoPipe
  ],
  imports: [CommonModule],
  exports: [
    ButtonComponent,
    CardComponent,
    HighlightDirective,
    TimeAgoPipe
  ]
})
export class SharedModule {}

// AFTER: Standalone components
// Each component is now self-contained:

// button.component.ts
@Component({
  selector: 'app-button',
  standalone: true,
  imports: [CommonModule],
  template: `...`
})
export class ButtonComponent {}

// card.component.ts
@Component({
  selector: 'app-card',
  standalone: true,
  imports: [CommonModule],
  template: `...`
})
export class CardComponent {}

// Create an index for convenient imports
// shared/index.ts
export { ButtonComponent } from './button/button.component';
export { CardComponent } from './card/card.component';
export { HighlightDirective } from './directives/highlight.directive';
export { TimeAgoPipe } from './pipes/time-ago.pipe';

// Optional: Create a convenience array for bulk imports.
// This lets consuming components write `imports: [...SHARED_COMPONENTS]`
// instead of listing each one individually. Use sparingly -- it defeats
// tree-shaking if the array includes components the consumer does not use.
export const SHARED_COMPONENTS = [
  ButtonComponent,
  CardComponent
] as const;

export const SHARED_DIRECTIVES = [
  HighlightDirective
] as const;

export const SHARED_PIPES = [
  TimeAgoPipe
] as const;

Should you use convenience arrays or individual imports? For small teams and small shared libraries, convenience arrays are fine — the tree-shaking impact is negligible. For published libraries or monorepos with many consumers, prefer individual imports so that unused components are eliminated from the bundle. The rule of thumb: if every consumer uses most of the shared components, arrays are convenient. If consumers cherry-pick one or two items, individual imports are better.

Best Practices

Organize by Feature

Group related standalone components, services, and routes by feature

Use Index Exports

Create barrel files (index.ts) for convenient imports

Provider Functions

Create reusable provider functions for complex configurations

Explicit Dependencies

Import only what each component needs - improves tree-shaking

Folder Structure for Standalone

src/app/
├── core/
│   ├── guards/
│   │   ├── auth.guard.ts
│   │   └── index.ts
│   ├── interceptors/
│   │   ├── auth.interceptor.ts
│   │   ├── error.interceptor.ts
│   │   └── index.ts
│   ├── services/
│   │   ├── auth.service.ts
│   │   ├── api.service.ts
│   │   └── index.ts
│   └── providers/
│       ├── app-config.provider.ts
│       ├── auth.provider.ts
│       └── index.ts
├── shared/
│   ├── components/
│   │   ├── button/
│   │   │   ├── button.component.ts
│   │   │   ├── button.component.spec.ts
│   │   │   └── index.ts
│   │   └── index.ts
│   ├── directives/
│   ├── pipes/
│   └── index.ts
├── features/
│   ├── dashboard/
│   │   ├── components/
│   │   ├── services/
│   │   ├── dashboard.component.ts
│   │   └── dashboard.routes.ts
│   └── users/
│       ├── components/
│       ├── services/
│       ├── users.component.ts
│       └── users.routes.ts
├── app.component.ts
├── app.routes.ts
└── app.config.ts

Practice Exercise

Create Standalone Library

Build a reusable UI component library with standalone components

Migrate Existing App

Take a NgModule-based app and migrate it to fully standalone

Implement Lazy Loading

Set up advanced lazy loading patterns with preloading strategies

Next: NgRx State Management

Master reactive state management with NgRx Store, Effects, and Selectors

​Standalone Components Overview

​Creating Standalone Components

​Basic Standalone Component

​Standalone Component with Providers

​Standalone Directives & Pipes

​Standalone Directive

​Standalone Pipe

​Bootstrapping Standalone Applications

​Modern Application Bootstrap

​Provider Functions Pattern

​Lazy Loading Standalone Components

​Route-Level Lazy Loading

​Dynamic Component Loading

​Migrating from NgModules

​Migration Strategy

​Automated Migration

​Manual Migration Example

​Best Practices

Organize by Feature

Use Index Exports

Provider Functions

Explicit Dependencies

​Folder Structure for Standalone

​Practice Exercise

Next: NgRx State Management

Standalone Components Overview

Creating Standalone Components

Basic Standalone Component

Standalone Component with Providers

Standalone Directives & Pipes

Standalone Directive

Standalone Pipe

Bootstrapping Standalone Applications

Modern Application Bootstrap

Provider Functions Pattern

Lazy Loading Standalone Components

Route-Level Lazy Loading

Dynamic Component Loading

Migrating from NgModules

Migration Strategy

Automated Migration

Manual Migration Example

Best Practices

Folder Structure for Standalone

Practice Exercise