nx/packages/angular/src/migrations/update-21-0-0/change-data-persistence-operators-imports-to-ngrx-router-store-data-persistence.md

Change the Data Persistence Operator Imports from @nx/angular to @ngrx/router-store/data-persistence

The data persistence operators (fetch, navigation, optimisticUpdate, and pessimisticUpdate) have been deprecated for a while and are now removed from the @nx/angular package. This migration automatically updates your import statements to use the @ngrx/router-store/data-persistence module and adds @ngrx/router-store to your dependencies if needed.

Examples

If you import only data persistence operators from @nx/angular, the migration will update the import path to @ngrx/router-store/data-persistence.

{% tabs %} {% tab label="Before" %}

import { Actions, createEffect, ofType } from '@ngrx/effects';
import { fetch } from '@nx/angular';

@Injectable()
export class UsersEffects {
  // ...
}

{% /tab %}

{% tab label="After" %}

import { Injectable } from '@angular/core';
import { fetch } from '@ngrx/router-store/data-persistence';

@Injectable()
export class UsersEffects {
  // ...
}

{% /tab %} {% /tabs %}

If you import multiple data persistence operators from @nx/angular, the migration will update the import path for all of them.

{% tabs %} {% tab label="Before" %}

import { Injectable } from '@angular/core';
import { fetch, navigation } from '@nx/angular';

@Injectable()
export class UsersEffects {
  // ...
}

{% /tab %}

{% tab label="After" %}

import { Injectable } from '@angular/core';
import { fetch, navigation } from '@ngrx/router-store/data-persistence';

@Injectable()
export class UsersEffects {
  // ...
}

{% /tab %}

{% /tab %} {% /tabs %}

If your imports mix data persistence operators with other utilities from @nx/angular, the migration will split them into separate import statements.

{% tabs %} {% tab label="Before" %}

import { Injectable } from '@angular/core';
import { fetch, someExtraUtility, navigation } from '@nx/angular';

@Injectable()
export class UsersEffects {
  // ...
}

{% /tab %}

{% tab label="After" %}

import { Injectable } from '@angular/core';
import { fetch, navigation } from '@ngrx/router-store/data-persistence';
import { someExtraUtility } from '@nx/angular';

@Injectable()
export class UsersEffects {
  // ...
}

{% /tab %} {% /tabs %}

If you don't already have @ngrx/router-store in your dependencies, the migration will add it to your package.json.

{% tabs %} {% tab label="Before" %}

{
  "dependencies": {
    "@nx/angular": "^21.0.0",
    "@ngrx/store": "^19.1.0",
    "@ngrx/effects": "^19.1.0"
    // ...
  }
}

{% /tab %}

{% tab label="After" %}

{
  "dependencies": {
    "@nx/angular": "^21.0.0",
    "@ngrx/store": "^19.1.0",
    "@ngrx/effects": "^19.1.0",
    "@ngrx/router-store": "^19.1.0"
    // ...
  }
}

{% /tab %} {% /tabs %}