Managing Lifecycle and Observable Cleanup with ngOnDestroy() in Angular Services

In Angular application development, the ngOnDestroy() lifecycle hook is commonly used in components and directives, where developers typically unsubscribe from Observables to prevent memory leaks. However, when Observables are created within @Injectable() services, cleanup mechanisms require more nuanced consideration.

Implementing OnDestroy Interface in Services

According to Angular official documentation, the OnDestroy lifecycle hook is also available for providers. This means services can implement the OnDestroy interface and execute cleanup logic within the ngOnDestroy() method. Below is a standard implementation example:

@Injectable()
class DataService implements OnDestroy {
  private dataSubscription: Subscription;
  
  constructor() {
    this.dataSubscription = someObservable.subscribe(data => {
      // Process data
    });
  }
  
  ngOnDestroy() {
    console.log('DataService is being destroyed');
    if (this.dataSubscription) {
      this.dataSubscription.unsubscribe();
    }
  }
}

Destruction Timing of Service Instances

The destruction timing of a service depends on its injector hierarchy registration. When a service is provided at the component level, its lifecycle is bound to the owning component. Consider the following component structure:

@Component({
  selector: 'app-user',
  template: '<div>User Component</div>',
  providers: [DataService]  // Component-level service
})
export class UserComponent implements OnDestroy {
  constructor(private dataService: DataService) {}
  
  ngOnDestroy() {
    console.log('UserComponent is being destroyed');
    // DataService's ngOnDestroy() will be automatically called afterward
  }
}

When UserComponent is destroyed (e.g., removed via *ngIf condition), its provided DataService instance will also be destroyed, triggering the ngOnDestroy() method.

Special Considerations for Root Injector Services

For services registered in the root injector (typically via providedIn: 'root' or the application module's providers array), their lifecycle matches the entire application. The ngOnDestroy() of such services is only called when the application is destroyed, which is particularly important in testing scenarios to prevent memory leaks from multiple application bootstraps.

@Injectable({
  providedIn: 'root'  // Root-level service
})
export class AppConfigService implements OnDestroy {
  ngOnDestroy() {
    console.log('AppConfigService is being destroyed - only when the application is fully destroyed');
  }
}

Responsibility Allocation for Cross-Hierarchy Subscriptions

When child components subscribe to services provided by parent injectors, special attention must be paid to cleanup responsibility. In such cases, the service will not be destroyed with the child component, so the component must actively unsubscribe in its own ngOnDestroy():

@Component({
  selector: 'app-child',
  template: '<div>Child Component</div>'
})
export class ChildComponent implements OnDestroy, OnInit {
  private subscription: Subscription;
  
  constructor(private parentService: ParentService) {}  // From parent injector
  
  ngOnInit() {
    this.subscription = this.parentService.data$.subscribe(data => {
      // Use data
    });
  }
  
  ngOnDestroy() {
    // Must manually unsubscribe
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
}

Best Practices Summary

1. For component-level services, implementing the OnDestroy interface is an effective cleanup mechanism, with destruction synchronized to the component.
2. The ngOnDestroy() of root-level services is primarily for application-level cleanup, especially in testing environments.
3. When components subscribe to services from injectors other than their own, cleanup responsibility belongs to the component and must be handled in the component's ngOnDestroy().
4. Using the takeUntil operator with a Subject can create a more elegant unsubscribe pattern:

private destroy$ = new Subject<void>();

ngOnInit() {
  someObservable.pipe(
    takeUntil(this.destroy$)
  ).subscribe(data => {
    // Process data
  });
}

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

This pattern manages multiple subscriptions through a single signal source, reducing repetitive unsubscribe code.