fix(angular): ngrx-feature-store should respect paths in names #18905 (…

…#18913)

packages/angular/src/generators/ngrx-feature-store/__snapshots__/ngrx-feature-store.spec.ts.snap

@@ -1,5 +1,199 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`ngrx-feature-store NgModule should generate into a subdirectory correctly when a path is passed as the name 1`] = `
+"export * from './lib/+state/users/users.facade';
+export * from './lib/+state/users/users.models';
+export * from './lib/+state/users/users.selectors';
+export * from './lib/+state/users/users.reducer';
+export * from './lib/+state/users/users.actions';
+export * from './lib/feature-module.module';
+"
+`;
+
+exports[`ngrx-feature-store NgModule should generate into a subdirectory correctly when a path is passed as the name 2`] = `
+"import { createAction, props } from '@ngrx/store';
+import { UsersEntity } from './users.models';
+
+export const initUsers = createAction('[Users Page] Init');
+
+export const loadUsersSuccess = createAction(
+  '[Users/API] Load Users Success',
+  props<{ users: UsersEntity[] }>()
+);
+
+export const loadUsersFailure = createAction(
+  '[Users/API] Load Users Failure',
+  props<{ error: any }>()
+);
+"
+`;
+
+exports[`ngrx-feature-store NgModule should generate into a subdirectory correctly when a path is passed as the name 3`] = `
+"import { Injectable, inject } from '@angular/core';
+import { createEffect, Actions, ofType } from '@ngrx/effects';
+import { switchMap, catchError, of } from 'rxjs';
+import * as UsersActions from './users.actions';
+import * as UsersFeature from './users.reducer';
+
+@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-feature-store NgModule should generate into a subdirectory correctly when a path is passed as the name 4`] = `
+"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-feature-store NgModule should generate into a subdirectory correctly when a path is passed as the name 5`] = `
+"import { EntityState, EntityAdapter, createEntityAdapter } from '@ngrx/entity';
+import { createReducer, on, Action } from '@ngrx/store';
+
+import * as UsersActions from './users.actions';
+import { UsersEntity } from './users.models';
+
+export const USERS_FEATURE_KEY = 'users';
+
+export interface UsersState extends EntityState<UsersEntity> {
+  selectedId?: string | number; // which Users record has been selected
+  loaded: boolean; // has the Users list been loaded
+  error?: string | null; // last known error (if any)
+}
+
+export interface UsersPartialState {
+  readonly [USERS_FEATURE_KEY]: UsersState;
+}
+
+export const usersAdapter: EntityAdapter<UsersEntity> =
+  createEntityAdapter<UsersEntity>();
+
+export const initialUsersState: UsersState = usersAdapter.getInitialState({
+  // set initial required properties
+  loaded: false,
+});
+
+const reducer = createReducer(
+  initialUsersState,
+  on(UsersActions.initUsers, (state) => ({
+    ...state,
+    loaded: false,
+    error: null,
+  })),
+  on(UsersActions.loadUsersSuccess, (state, { users }) =>
+    usersAdapter.setAll(users, { ...state, loaded: true })
+  ),
+  on(UsersActions.loadUsersFailure, (state, { error }) => ({ ...state, error }))
+);
+
+export function usersReducer(state: UsersState | undefined, action: Action) {
+  return reducer(state, action);
+}
+"
+`;
+
+exports[`ngrx-feature-store NgModule should generate into a subdirectory correctly when a path is passed as the name 6`] = `
+"import { createFeatureSelector, createSelector } from '@ngrx/store';
+import { USERS_FEATURE_KEY, UsersState, usersAdapter } from './users.reducer';
+
+// Lookup the 'Users' feature state managed by NgRx
+export const selectUsersState =
+  createFeatureSelector<UsersState>(USERS_FEATURE_KEY);
+
+const { selectAll, selectEntities } = usersAdapter.getSelectors();
+
+export const selectUsersLoaded = createSelector(
+  selectUsersState,
+  (state: UsersState) => state.loaded
+);
+
+export const selectUsersError = createSelector(
+  selectUsersState,
+  (state: UsersState) => state.error
+);
+
+export const selectAllUsers = createSelector(
+  selectUsersState,
+  (state: UsersState) => selectAll(state)
+);
+
+export const selectUsersEntities = createSelector(
+  selectUsersState,
+  (state: UsersState) => selectEntities(state)
+);
+
+export const selectSelectedId = createSelector(
+  selectUsersState,
+  (state: UsersState) => state.selectedId
+);
+
+export const selectEntity = createSelector(
+  selectUsersEntities,
+  selectSelectedId,
+  (entities, selectedId) => (selectedId ? entities[selectedId] : undefined)
+);
+"
+`;
+
+exports[`ngrx-feature-store NgModule should generate into a subdirectory correctly when a path is passed as the name 7`] = `
+"import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { StoreModule } from '@ngrx/store';
+import { EffectsModule } from '@ngrx/effects';
+import * as fromUsers from './+state/users/users.reducer';
+import { UsersEffects } from './+state/users/users.effects';
+import { UsersFacade } from './+state/users/users.facade';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    StoreModule.forFeature(fromUsers.USERS_FEATURE_KEY, fromUsers.usersReducer),
+    EffectsModule.forFeature([UsersEffects]),
+  ],
+  providers: [UsersFacade],
+})
+export class FeatureModuleModule {}
+"
+`;
+
 exports[`ngrx-feature-store NgModule should generate the files with the correct content 1`] = `
 "import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';

packages/angular/src/generators/ngrx-feature-store/files/base/__directory__/__fileName__.actions.ts__tmpl__

@@ -1,5 +1,5 @@
 import { createAction, props } from '@ngrx/store';
-import { <%= className %>Entity } from './<%= fileName %>.models';
+import { <%= className %>Entity } from './<%= relativeFileName %>.models';
 
 export const init<%= className %> = createAction(
   '[<%= className %> Page] Init'

packages/angular/src/generators/ngrx-feature-store/files/base/__directory__/__fileName__.effects.spec.ts__tmpl__

@@ -5,8 +5,8 @@ import { provideMockStore } from '@ngrx/store/testing';
 import { hot } from 'jasmine-marbles';
 import { Observable } from 'rxjs';
 
-import * as <%= className %>Actions from './<%= fileName %>.actions';
-import { <%= className %>Effects } from './<%= fileName %>.effects';
+import * as <%= className %>Actions from './<%= relativeFileName %>.actions';
+import { <%= className %>Effects } from './<%= relativeFileName %>.effects';
 
 describe('<%= className %>Effects', () => {
   let actions: Observable<Action>;

packages/angular/src/generators/ngrx-feature-store/files/base/__directory__/__fileName__.effects.ts__tmpl__

@@ -3,8 +3,8 @@ import { createEffect, Actions, ofType } from '@ngrx/effects';<% if (!importFrom
 import { switchMap, catchError, of } from 'rxjs';<% } else { %>
 import { of } from 'rxjs';
 import { switchMap, catchError } from 'rxjs/operators';<% } %>
-import * as <%= className %>Actions from './<%= fileName %>.actions';
-import * as <%= className %>Feature from './<%= fileName %>.reducer';
+import * as <%= className %>Actions from './<%= relativeFileName %>.actions';
+import * as <%= className %>Feature from './<%= relativeFileName %>.reducer';
 
 @Injectable()
 export class <%= className %>Effects {

packages/angular/src/generators/ngrx-feature-store/files/base/__directory__/__fileName__.facade.spec.ts__tmpl__

@@ -4,17 +4,17 @@ import { EffectsModule } from '@ngrx/effects';
 import { StoreModule, Store } from '@ngrx/store';
 import { readFirst } from '@nx/angular/testing';
 
-import * as <%= className %>Actions from './<%= fileName %>.actions';
-import { <%= className %>Effects } from './<%= fileName %>.effects';
-import { <%= className %>Facade } from './<%= fileName %>.facade';
-import { <%= className %>Entity } from './<%= fileName %>.models';
+import * as <%= className %>Actions from './<%= relativeFileName %>.actions';
+import { <%= className %>Effects } from './<%= relativeFileName %>.effects';
+import { <%= className %>Facade } from './<%= relativeFileName %>.facade';
+import { <%= className %>Entity } from './<%= relativeFileName %>.models';
 import {
   <%= constantName %>_FEATURE_KEY,
   <%= className %>State,
   initial<%= className %>State,
   <%= propertyName %>Reducer
-} from './<%= fileName %>.reducer';
-import * as <%= className %>Selectors from './<%= fileName %>.selectors';
+} from './<%= relativeFileName %>.reducer';
+import * as <%= className %>Selectors from './<%= relativeFileName %>.selectors';
 
 interface TestSchema {
   <%= propertyName %>: <%= className %>State;

packages/angular/src/generators/ngrx-feature-store/files/base/__directory__/__fileName__.facade.ts__tmpl__

@@ -1,9 +1,9 @@
 import { Injectable, inject } from '@angular/core';
 import { select, Store, Action } from '@ngrx/store';
 
-import * as <%= className %>Actions from './<%= fileName %>.actions';
-import * as <%= className %>Feature from './<%= fileName %>.reducer';
-import * as <%= className %>Selectors from './<%= fileName %>.selectors';
+import * as <%= className %>Actions from './<%= relativeFileName %>.actions';
+import * as <%= className %>Feature from './<%= relativeFileName %>.reducer';
+import * as <%= className %>Selectors from './<%= relativeFileName %>.selectors';
 
 @Injectable()
 export class <%= className %>Facade {

packages/angular/src/generators/ngrx-feature-store/files/base/__directory__/__fileName__.reducer.spec.ts__tmpl__

@@ -1,8 +1,8 @@
 import { Action } from '@ngrx/store';
 
-import * as <%= className %>Actions from './<%= fileName %>.actions';
-import { <%= className %>Entity } from './<%= fileName %>.models';
-import { <%= className %>State, initial<%= className %>State, <%= propertyName %>Reducer } from './<%= fileName %>.reducer';
+import * as <%= className %>Actions from './<%= relativeFileName %>.actions';
+import { <%= className %>Entity } from './<%= relativeFileName %>.models';
+import { <%= className %>State, initial<%= className %>State, <%= propertyName %>Reducer } from './<%= relativeFileName %>.reducer';
 
 describe('<%= className %> Reducer', () => {
   const create<%= className %>Entity = (id: string, name = ''): <%= className %>Entity => ({

packages/angular/src/generators/ngrx-feature-store/files/base/__directory__/__fileName__.reducer.ts__tmpl__

@@ -1,8 +1,8 @@
 import { EntityState, EntityAdapter, createEntityAdapter } from '@ngrx/entity';
 import { createReducer, on, Action } from '@ngrx/store';
 
-import * as <%= className %>Actions from './<%= fileName %>.actions';
-import { <%= className %>Entity } from './<%= fileName %>.models';
+import * as <%= className %>Actions from './<%= relativeFileName %>.actions';
+import { <%= className %>Entity } from './<%= relativeFileName %>.models';
 
 export const <%= constantName %>_FEATURE_KEY = '<%= propertyName %>';
 

packages/angular/src/generators/ngrx-feature-store/files/base/__directory__/__fileName__.selectors.spec.ts__tmpl__

@@ -1,6 +1,6 @@
-import { <%= className %>Entity } from './<%= fileName %>.models';
-import { <%= propertyName %>Adapter, <%= className %>PartialState, initial<%= className %>State } from './<%= fileName %>.reducer';
-import * as <%= className %>Selectors from './<%= fileName %>.selectors';
+import { <%= className %>Entity } from './<%= relativeFileName %>.models';
+import { <%= propertyName %>Adapter, <%= className %>PartialState, initial<%= className %>State } from './<%= relativeFileName %>.reducer';
+import * as <%= className %>Selectors from './<%= relativeFileName %>.selectors';
 
 describe('<%= className %> Selectors', () => {
   const ERROR_MSG = 'No Error Available';

packages/angular/src/generators/ngrx-feature-store/files/base/__directory__/__fileName__.selectors.ts__tmpl__

@@ -1,5 +1,5 @@
 import { createFeatureSelector, createSelector } from '@ngrx/store';
-import { <%= constantName %>_FEATURE_KEY, <%= className %>State, <%= propertyName %>Adapter } from './<%= fileName %>.reducer';
+import { <%= constantName %>_FEATURE_KEY, <%= className %>State, <%= propertyName %>Adapter } from './<%= relativeFileName %>.reducer';
 
 // Lookup the '<%= className %>' feature state managed by NgRx
 export const select<%= className %>State = createFeatureSelector<<%= className %>State>(<%= constantName %>_FEATURE_KEY);

packages/angular/src/generators/ngrx-feature-store/files/no-inject/__directory__/__fileName__.effects.ts__tmpl__

@@ -1,8 +1,8 @@
 import { Injectable } from '@angular/core';
 import { createEffect, Actions, ofType } from '@ngrx/effects';
 
-import * as <%= className %>Actions from './<%= fileName %>.actions';
-import * as <%= className %>Feature from './<%= fileName %>.reducer';
+import * as <%= className %>Actions from './<%= relativeFileName %>.actions';
+import * as <%= className %>Feature from './<%= relativeFileName %>.reducer';
 
 import {switchMap, catchError, of} from 'rxjs';
 

packages/angular/src/generators/ngrx-feature-store/files/no-inject/__directory__/__fileName__.facade.ts__tmpl__

@@ -1,9 +1,9 @@
 import { Injectable } from '@angular/core';
 import { select, Store, Action } from '@ngrx/store';
 
-import * as <%= className %>Actions from './<%= fileName %>.actions';
-import * as <%= className %>Feature from './<%= fileName %>.reducer';
-import * as <%= className %>Selectors from './<%= fileName %>.selectors';
+import * as <%= className %>Actions from './<%= relativeFileName %>.actions';
+import * as <%= className %>Feature from './<%= relativeFileName %>.reducer';
+import * as <%= className %>Selectors from './<%= relativeFileName %>.selectors';
 
 @Injectable()
 export class <%= className %>Facade {

packages/angular/src/generators/ngrx-feature-store/lib/add-exports-barrel.ts

@@ -33,7 +33,10 @@ export function addExportsToBarrel(
 
   // Public API for the feature interfaces, selectors, and facade
   const { className, fileName } = names(options.name);
-  const statePath = `./lib/${options.directory}/${fileName}`;
+  const fileNameWithSubdir = options.subdirectory
+    ? joinPathFragments(options.subdirectory, fileName)
+    : fileName;
+  const statePath = `./lib/${options.directory}/${fileNameWithSubdir}`;
 
   sourceFile = addGlobal(
     tree,

packages/angular/src/generators/ngrx-feature-store/lib/add-imports.ts

@@ -114,7 +114,9 @@ export function addImportsToModule(
     );
   };
 
-  const dir = `./${names(options.directory).fileName}`;
+  const dir = `./${names(options.directory).fileName}${
+    options.subdirectory ? `/${options.subdirectory}` : ''
+  }`;
   const pathPrefix = `${dir}/${names(options.name).fileName}`;
   const reducerPath = `${pathPrefix}.reducer`;
   const effectsPath = `${pathPrefix}.effects`;