NgRx Push Migration

Automated migration schematic to replace the async pipe with ngrxPush pipe for better performance and change detection optimization in NgRx applications.

Overview

The NgRx Push Migration schematic automatically transforms templates in your Angular application to replace the standard async pipe with the more efficient ngrxPush pipe from @ngrx/component. This migration improves performance by providing better change detection control and reducing unnecessary re-renders.

Capabilities

Migration Execution

Scans your application for usage of the async pipe with NgRx observables and replaces them with ngrxPush.

interface NgRxPushMigrationSchema {
  // This migration schematic has no configurable properties
  // It automatically scans and transforms the entire project
}

CLI Usage:

# Run the migration across your entire project
ng generate @ngrx/schematics:ngrx-push-migration

# Alternative using alias
ng generate @ngrx/schematics:ngrxpush

Migration Behavior

Before Migration

<!-- Component template using async pipe -->
<div>{{ user$ | async }}</div>
<div *ngIf="isLoading$ | async">Loading...</div>
<ul>
  <li *ngFor="let item of items$ | async">{{ item.name }}</li>
</ul>

After Migration

<!-- Component template using ngrxPush pipe -->
<div>{{ user$ | ngrxPush }}</div>
<div *ngIf="isLoading$ | ngrxPush">Loading...</div>
<ul>
  <li *ngFor="let item of items$ | ngrxPush">{{ item.name }}</li>
</ul>

Benefits

• Better Performance: ngrxPush provides more granular change detection control
• Reduced Bundle Size: Optimized for NgRx usage patterns
• Improved Developer Experience: Better debugging and error handling
• Change Detection Optimization: Works better with OnPush change detection strategy

Requirements

• @ngrx/component must be installed in your project
• Compatible with Angular applications using NgRx state management
• Templates must use the async pipe with observable streams

Implementation Notes

This migration:

• Automatically scans all component templates in your project
• Identifies usage of async pipe with observables
• Replaces async with ngrxPush where appropriate
• Ensures proper imports are added to components
• Does not require manual configuration or parameters