feat(angular): add backwards compat support for the ngrx generator (#14348)

Author: leosvelperez

docs/generated/packages/angular/generators/ngrx.json

@@ -32,12 +32,12 @@
       },
       "parent": {
         "type": "string",
-        "description": "The path to the `NgModule` or the `Routes` definition file (for Standalone API usage) where the feature state will be registered. The host directory will create/use the new state directory.",
+        "description": "The path to the `NgModule` or the `Routes` definition file (for Standalone API usage) where the feature state will be registered. _Note: The Standalone API usage is only supported in Angular versions >= 14.1.0_.",
         "x-prompt": "What is the path to the module or Routes definition where this NgRx state should be registered?"
       },
       "route": {
         "type": "string",
-        "description": "The route that the Standalone NgRx Providers should be added to.",
+        "description": "The route that the Standalone NgRx Providers should be added to. _Note: This is only supported in Angular versions >= 14.1.0_.",
         "default": "''"
       },
       "directory": {

packages/angular/package.json

@@ -40,7 +40,6 @@
   },
   "dependencies": {
     "@angular-devkit/schematics": "~15.1.0",
-    "@nguniversal/builders": "~15.0.0",
     "@nrwl/cypress": "file:../cypress",
     "@nrwl/devkit": "file:../devkit",
     "@nrwl/jest": "file:../jest",
@@ -61,6 +60,15 @@
     "webpack": "^5.75.0",
     "webpack-merge": "5.7.3"
   },
+  "peerDependencies": {
+    "@nguniversal/builders": "~15.0.0",
+    "rxjs": "^6.5.3 || ^7.5.0"
+  },
+  "peerDependenciesMeta": {
+    "@nguniversal/builders": {
+      "optional": true
+    }
+  },
   "publishConfig": {
     "access": "public"
   }

packages/angular/src/generators/ngrx/__snapshots__/ngrx.spec.ts.snap

@@ -604,3 +604,117 @@ import { UsersEffects } from './+state/users.effects';
 import { UsersFacade } from './+state/users.facade'; 
       export const appRoutes: Routes = [{ path: '', component: NxWelcomeComponent , providers: [UsersFacade, provideState(fromUsers.USERS_FEATURE_KEY, fromUsers.usersReducer), provideEffects(UsersEffects)]}];"
 `;
+
+exports[`ngrx angular v14 support should generate the ngrx effects using "inject" for versions >= 14.1.0 1`] = `
+"import { Injectable, inject } from '@angular/core';
+import { createEffect, Actions, ofType } from '@ngrx/effects';
+
+import * as UsersActions from './users.actions';
+import * as UsersFeature from './users.reducer';
+
+import {switchMap, catchError, of} from 'rxjs';
+
+@Injectable()
+export class UsersEffects {
+  private actions$ = inject(Actions);
+
+  init$ = createEffect(() => this.actions$.pipe(
+    ofType(UsersActions.initUsers),
+    switchMap(() => of(UsersActions.loadUsersSuccess({ users: [] }))),
+    catchError((error) => {
+        console.error('Error', error);
+        return of(UsersActions.loadUsersFailure({ error }));
+      }
+    )
+  ));
+}
+"
+`;
+
+exports[`ngrx angular v14 support should generate the ngrx effects with no usage of "inject" 1`] = `
+"import { Injectable } from '@angular/core';
+import { createEffect, Actions, ofType } from '@ngrx/effects';
+
+import * as UsersActions from './users.actions';
+import * as UsersFeature from './users.reducer';
+
+import {switchMap, catchError, of} from 'rxjs';
+
+@Injectable()
+export class UsersEffects {
+  init$ = createEffect(() => this.actions$.pipe(
+    ofType(UsersActions.initUsers),
+    switchMap(() => of(UsersActions.loadUsersSuccess({ users: [] }))),
+    catchError((error) => {
+        console.error('Error', error);
+        return of(UsersActions.loadUsersFailure({ error }));
+      }
+    )
+  ));
+
+  constructor(private readonly actions$: Actions) {}
+}
+"
+`;
+
+exports[`ngrx angular v14 support should generate the ngrx facade using "inject" for versions >= 14.1.0 1`] = `
+"import { Injectable, inject } from '@angular/core';
+import { select, Store, Action } from '@ngrx/store';
+
+import * as UsersActions from './users.actions';
+import * as UsersFeature from './users.reducer';
+import * as UsersSelectors from './users.selectors';
+
+@Injectable()
+export class UsersFacade {
+  private readonly store = inject(Store);
+
+  /**
+   * Combine pieces of state using createSelector,
+   * and expose them as observables through the facade.
+   */
+  loaded$ = this.store.pipe(select(UsersSelectors.selectUsersLoaded));
+  allUsers$ = this.store.pipe(select(UsersSelectors.selectAllUsers));
+  selectedUsers$ = this.store.pipe(select(UsersSelectors.selectEntity));
+
+  /**
+   * Use the initialization action to perform one
+   * or more tasks in your Effects.
+   */
+  init() {
+    this.store.dispatch(UsersActions.initUsers());
+  }
+}
+"
+`;
+
+exports[`ngrx angular v14 support should generate the ngrx facade with no usage of "inject" 1`] = `
+"import { Injectable } from '@angular/core';
+import { select, Store, Action } from '@ngrx/store';
+
+import * as UsersActions from './users.actions';
+import * as UsersFeature from './users.reducer';
+import * as UsersSelectors from './users.selectors';
+
+@Injectable()
+export class UsersFacade {
+  /**
+   * Combine pieces of state using createSelector,
+   * and expose them as observables through the facade.
+   */
+  loaded$ = this.store.pipe(select(UsersSelectors.selectUsersLoaded));
+  allUsers$ = this.store.pipe(select(UsersSelectors.selectAllUsers));
+  selectedUsers$ = this.store.pipe(select(UsersSelectors.selectEntity));
+
+  constructor(private readonly store: Store) {}
+
+  /**
+   * Use the initialization action to perform one
+   * or more tasks in your Effects.
+   */
+  init() {
+    this.store.dispatch(UsersActions.initUsers());
+  }
+}
+"
+`;