Add solution to zoneless routing in @ngrx/component?

[dominicegginton]

I encountered an issue with the Angular Router in a zoneless application and believe a simple solution could be provided by @ngrx/component.

The problem:

The ngOnInit lifecycle hook of the routed component is not called in a zoneless configuration. This is due to the Router internally calling ChangeDetectorRef.markForCheck() upon route activation. In a zonless configuration, this will not trigger change detection.

Proposed Solution:

A new directive that listens to the (activate) event of the RouterOutlet and calls the ChangeDetectorRef.detectChanges() method:

import { ChangeDetectorRef, Directive, HostListener } from '@angular/core';

@Directive({
  selector: 'router-outlet[ngrxActivateRoute]',
  standalone: true,
})
export class ActivateRoutePushDirective {
  constructor(private chaneDetectorRef: ChangeDetectorRef) {}

  @HostListener('activate')
  private onActivate() {
    this.chaneDetectorRef.detectChanges();
  }
}

Resources

• stackblitz playground