ContextQMD
Back to Nx

Change Data Persistence Operators Imports To Ngrx Router Store Data Persistence

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

22.7.12.9 KB
Original Source

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.

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

@Injectable()
export class UsersEffects {
  // ...
}
After
ts
import { Injectable } from '@angular/core';
import { fetch } from '@ngrx/router-store/data-persistence';

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

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

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

@Injectable()
export class UsersEffects {
  // ...
}
After
ts
import { Injectable } from '@angular/core';
import { fetch, navigation } from '@ngrx/router-store/data-persistence';

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

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

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

@Injectable()
export class UsersEffects {
  // ...
}
After
ts
import { Injectable } from '@angular/core';
import { fetch, navigation } from '@ngrx/router-store/data-persistence';
import { someExtraUtility } from '@nx/angular';

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

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

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