feat(angular): update ngrx packages to v16 (#16763)

package.json

@@ -58,9 +58,9 @@
     "@nestjs/schematics": "^9.1.0",
     "@nestjs/swagger": "^6.0.0",
     "@nestjs/testing": "^9.0.0",
-    "@ngrx/effects": "~15.3.0",
-    "@ngrx/router-store": "~15.3.0",
-    "@ngrx/store": "~15.3.0",
+    "@ngrx/effects": "~16.0.0",
+    "@ngrx/router-store": "~16.0.0",
+    "@ngrx/store": "~16.0.0",
     "@nguniversal/builders": "~16.0.0",
     "@nx/cypress": "16.1.0-rc.0",
     "@nx/devkit": "16.1.0-rc.0",

packages/angular/migrations.json

@@ -236,6 +236,15 @@
       },
       "description": "Update the @angular/cli package version to ~16.0.0.",
       "factory": "./src/migrations/update-16-1-0/update-angular-cli"
+    },
+    "switch-data-persistence-operators-imports-to-ngrx-router-store": {
+      "cli": "nx",
+      "version": "16.2.0-beta.0",
+      "requires": {
+        "@ngrx/store": ">=16.0.0"
+      },
+      "description": "Switch the data persistence operator imports to '@ngrx/router-store/data-persistence'.",
+      "factory": "./src/migrations/update-16-2-0/switch-data-persistence-operators-imports-to-ngrx-router-store"
     }
   },
   "packageJsonUpdates": {
@@ -1126,6 +1135,18 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "16.2.0-ngrx": {
+      "version": "16.2.0-beta.0",
+      "requires": {
+        "@angular/core": "^16.0.0"
+      },
+      "packages": {
+        "@ngrx/store": {
+          "version": "~16.0.0",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

packages/angular/src/migrations/update-16-2-0/switch-data-persistence-operators-imports-to-ngrx-router-store.spec.ts

@@ -0,0 +1,309 @@
+import { ProjectGraph, Tree, addProjectConfiguration } from '@nx/devkit';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+import migration from './switch-data-persistence-operators-imports-to-ngrx-router-store';
+
+let projectGraph: ProjectGraph;
+jest.mock('@nx/devkit', () => ({
+  ...jest.requireActual('@nx/devkit'),
+  createProjectGraphAsync: jest
+    .fn()
+    .mockImplementation(async () => projectGraph),
+}));
+
+describe('switch-data-persistence-operators-imports-to-ngrx-router-store migration', () => {
+  let tree: Tree;
+  const file = 'apps/app1/src/app/+state/users.effects.ts';
+
+  beforeEach(() => {
+    tree = createTreeWithEmptyWorkspace();
+    addProjectConfiguration(tree, 'app1', { root: 'apps/app1' });
+    projectGraph = {
+      dependencies: {
+        app1: [{ source: 'app1', target: 'npm:@nx/angular', type: 'static' }],
+      },
+      nodes: {
+        app1: {
+          data: {
+            files: [
+              {
+                file,
+                hash: '',
+                dependencies: [
+                  {
+                    source: 'app1',
+                    target: 'npm:@nx/angular',
+                    type: 'static',
+                  },
+                ],
+              },
+            ],
+            root: 'apps/app1',
+          },
+          name: 'app1',
+          type: 'app',
+        },
+      },
+    };
+  });
+
+  it('should do nothing when there are no imports from the angular plugin', async () => {
+    tree.write(
+      file,
+      `import { Actions, createEffect, ofType } from '@ngrx/effects';
+        
+      @Injectable()
+      class UsersEffects {}
+      `
+    );
+
+    await migration(tree);
+
+    expect(tree.read(file, 'utf-8')).toMatchInlineSnapshot(`
+      "import { Actions, createEffect, ofType } from '@ngrx/effects';
+              
+            @Injectable()
+            class UsersEffects {}
+            "
+    `);
+  });
+
+  it('should not replace the import path when no operator is imported', async () => {
+    tree.write(
+      file,
+      `import { Actions, createEffect, ofType } from '@ngrx/effects';
+      import { foo } from '@nx/angular';
+      
+      @Injectable()
+      class UsersEffects {}
+      `
+    );
+
+    await migration(tree);
+
+    expect(tree.read(file, 'utf-8')).toMatchInlineSnapshot(`
+      "import { Actions, createEffect, ofType } from '@ngrx/effects';
+            import { foo } from '@nx/angular';
+            
+            @Injectable()
+            class UsersEffects {}
+            "
+    `);
+  });
+
+  it('should not match imports from angular plugin secondary entry points', async () => {
+    tree.write(
+      file,
+      `import { Actions, createEffect, ofType } from '@ngrx/effects';
+      import { fetch } from '@nx/angular/mf';
+      
+      @Injectable()
+      class UsersEffects {}
+      `
+    );
+
+    await migration(tree);
+
+    expect(tree.read(file, 'utf-8')).toMatchInlineSnapshot(`
+      "import { Actions, createEffect, ofType } from '@ngrx/effects';
+            import { fetch } from '@nx/angular/mf';
+            
+            @Injectable()
+            class UsersEffects {}
+            "
+    `);
+  });
+
+  it('should replace the import path in-place when it is importing an operator', async () => {
+    tree.write(
+      file,
+      `import { Actions, createEffect, ofType } from '@ngrx/effects';
+      import { fetch } from '@nx/angular';
+      
+      @Injectable()
+      class UsersEffects {}
+      `
+    );
+
+    await migration(tree);
+
+    expect(tree.read(file, 'utf-8')).toMatchInlineSnapshot(`
+      "import { Actions, createEffect, ofType } from '@ngrx/effects';
+      import { fetch } from '@ngrx/router-store/data-persistence';
+
+      @Injectable()
+      class UsersEffects {}
+      "
+    `);
+  });
+
+  it('should match imports using @nrwl/angular', async () => {
+    tree.write(
+      file,
+      `import { Actions, createEffect, ofType } from '@ngrx/effects';
+      import { fetch } from '@nrwl/angular';
+      
+      @Injectable()
+      class UsersEffects {}
+      `
+    );
+
+    await migration(tree);
+
+    expect(tree.read(file, 'utf-8')).toMatchInlineSnapshot(`
+      "import { Actions, createEffect, ofType } from '@ngrx/effects';
+      import { fetch } from '@ngrx/router-store/data-persistence';
+
+      @Injectable()
+      class UsersEffects {}
+      "
+    `);
+  });
+
+  it('should support multiple operators imports', async () => {
+    tree.write(
+      file,
+      `import { Actions, createEffect, ofType } from '@ngrx/effects';
+      import { fetch, navigation } from '@nx/angular';
+      
+      @Injectable()
+      class UsersEffects {}
+      `
+    );
+
+    await migration(tree);
+
+    expect(tree.read(file, 'utf-8')).toMatchInlineSnapshot(`
+      "import { Actions, createEffect, ofType } from '@ngrx/effects';
+      import { fetch, navigation } from '@ngrx/router-store/data-persistence';
+
+      @Injectable()
+      class UsersEffects {}
+      "
+    `);
+  });
+
+  it('should add a separate import statement when there are operator and non-operator imports', async () => {
+    tree.write(
+      file,
+      `import { Actions, createEffect, ofType } from '@ngrx/effects';
+      import { fetch, foo, navigation } from '@nx/angular';
+      
+      @Injectable()
+      class UsersEffects {}
+      `
+    );
+
+    await migration(tree);
+
+    expect(tree.read(file, 'utf-8')).toMatchInlineSnapshot(`
+      "import { Actions, createEffect, ofType } from '@ngrx/effects';
+      import { fetch, navigation } from '@ngrx/router-store/data-persistence';
+      import { foo } from '@nx/angular';
+
+      @Injectable()
+      class UsersEffects {}
+      "
+    `);
+  });
+
+  it('should support multiple import statements and import paths', async () => {
+    tree.write(
+      file,
+      `import { Actions, createEffect, ofType } from '@ngrx/effects';
+      import { fetch } from '@nx/angular';
+      import { navigation } from '@nrwl/angular';
+      
+      @Injectable()
+      class UsersEffects {}
+      `
+    );
+
+    await migration(tree);
+
+    expect(tree.read(file, 'utf-8')).toMatchInlineSnapshot(`
+      "import { Actions, createEffect, ofType } from '@ngrx/effects';
+      import { fetch } from '@ngrx/router-store/data-persistence';
+      import { navigation } from '@ngrx/router-store/data-persistence';
+
+      @Injectable()
+      class UsersEffects {}
+      "
+    `);
+  });
+
+  it('should support renamed import symbols', async () => {
+    tree.write(
+      file,
+      `import { Actions, createEffect, ofType } from '@ngrx/effects';
+      import { fetch as customFetch } from '@nx/angular';
+      
+      @Injectable()
+      class UsersEffects {}
+      `
+    );
+
+    await migration(tree);
+
+    expect(tree.read(file, 'utf-8')).toMatchInlineSnapshot(`
+      "import { Actions, createEffect, ofType } from '@ngrx/effects';
+      import { fetch as customFetch } from '@ngrx/router-store/data-persistence';
+
+      @Injectable()
+      class UsersEffects {}
+      "
+    `);
+  });
+
+  it('should support multiple imports with renamed and non-renamed symbols', async () => {
+    tree.write(
+      file,
+      `import { Actions, createEffect, ofType } from '@ngrx/effects';
+      import { fetch as customFetch, navigation } from '@nx/angular';
+      
+      @Injectable()
+      class UsersEffects {}
+      `
+    );
+
+    await migration(tree);
+
+    expect(tree.read(file, 'utf-8')).toMatchInlineSnapshot(`
+      "import { Actions, createEffect, ofType } from '@ngrx/effects';
+      import {
+        fetch as customFetch,
+        navigation,
+      } from '@ngrx/router-store/data-persistence';
+
+      @Injectable()
+      class UsersEffects {}
+      "
+    `);
+  });
+
+  it('should add a separate import statement even with renamed symbols', async () => {
+    tree.write(
+      file,
+      `import { Actions, createEffect, ofType } from '@ngrx/effects';
+      import { fetch as customFetch, foo, navigation } from '@nx/angular';
+      
+      @Injectable()
+      class UsersEffects {}
+      `
+    );
+
+    await migration(tree);
+
+    expect(tree.read(file, 'utf-8')).toMatchInlineSnapshot(`
+      "import { Actions, createEffect, ofType } from '@ngrx/effects';
+      import {
+        fetch as customFetch,
+        navigation,
+      } from '@ngrx/router-store/data-persistence';
+      import { foo } from '@nx/angular';
+
+      @Injectable()
+      class UsersEffects {}
+      "
+    `);
+  });
+});