ngxs-labs / actions-executing Goto Github PK

Because actionsExecuting([MyAction]) is returning observable of type ActionsExecuting i cant compile my angular project:

error TS2322: Type '{ [action: string]: number; }' is not assignable to type 'boolean'.  

The reason is that i have enabled fullTemplateTypeCheck in my tsconfig.json:

"angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
},

I dont want to turn it off, i am beginner with TypeScript / angular and this save my skin multiple times already 🥰

Better solution should be to have something like actionsExecutingAsBoolean([MyAction]): Observable<boolean>(); or anyActionExecuting([MyAction]): Observable<boolean>(); or something like that (i dont think i care which action is currently executing). But i have no idea how to write it...

Workaround is to omit the select type:

@Select(actionsExecuting([MyAction])) myActionIsExecuting$; //: Observable<ActionsExecuting>;

or setting it to any:

@Select(actionsExecuting([MyAction])) myActionIsExecuting$: any; //: Observable<ActionsExecuting>;

Workaround 2 is to use a pipe:

import { Pipe, PipeTransform } from '@angular/core';
import { ActionsExecuting } from '@ngxs-labs/actions-executing';

@Pipe({
  name: 'isExecuting'
})
export class IsExecutingPipe implements PipeTransform {

  transform(value: ActionsExecuting, args?: any): boolean {
    return value ? true : false;
  }

  /* Hack to "any"
  transform(value: ActionsExecuting, args?: any): any {
     return value;
  }
  */
}

and then chain it with async: [loading]="myActionIsExecuting$ | async | isExecuting"

Possible workaround 3
Is there a way to pipe @Select? 😃

I refactored an app so that some of the actions are now in feature modules (one is loaded lazily, one is not). In the feature modules, NgxsModule is imported using forFeature.
The subscription to the actionsExecuting observable is done in the bootstrap root component of the app.
After refactoring, the subscription no longer triggers. Before the refactoring, all was working as expected.

Hello,

After upgrading to @ngxs/[email protected], specially linked to this fix ngxs/store#1974, @ngxs-labs/actions-executing generates an error.

$ ng build
✔ Browser application bundle generation complete.

./src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Cannot resolve type entity i1.ɵz to symbol

Error: node_modules/@ngxs-labs/actions-executing/lib/actions-executing.module.d.ts:7:89 - error TS2339: Property 'ɵz' does not exist on type 'typeof import("@ngxs/store")'.

7     static ɵmod: i0.ɵɵNgModuleDeclaration<NgxsActionsExecutingModule, never, [typeof i1.ɵz], never>;
                     ```

Hello.
I use the ngxs-reset-plugin to Clear state on user logout, and reset all states to their defaults..

My code looks like this:

this.store.dispatch(new StateClear()); // to remove auth state information, stored in localStore (NGXS Storage plugin)
this.store.dispatch(new StateResetAll()); // to reset all states to their defaults

Just after executing this line:
this.store.dispatch(new StateClear());

I receive an error:

auth.state.ts:63 ERROR TypeError: Cannot read properties of undefined (reading '@@CLEAR_STATE')
    at Object.next (ngxs-labs-actions-executing.js:29:35)
    at source.subscribe.isUnsub (tap.js:17:81)
    at OperatorSubscriber._next (OperatorSubscriber.js:13:21)
    at OperatorSubscriber.next (Subscriber.js:31:18)
    at Object.next (ngxs-store.js:1521:33)
    at ConsumerObserver.next (Subscriber.js:91:33)
    at SafeSubscriber._next (Subscriber.js:60:26)
    at SafeSubscriber.next (Subscriber.js:31:18)
    at Subject.js:34:30
    at errorContext (errorContext.js:19:9)

The
@@CLEAR_STATE is just the action type name of the StateClear action:

/**
 * Action to clear all state except given state(s)
 */
export declare class StateClear {
    static readonly type = "@@CLEAR_STATE";
    readonly statesToKeep: MetaDataModel[];
    constructor(...statesToKeep: StateClass[]);
    constructor();
}

But the error points here:

 ngxsOnInit({ patchState, getState }) {
        this.actionsExecutedSub = this.actions$
            .pipe(tap((actionContext) => {
            const actionType = getActionTypeFromInstance(actionContext.action);
            if (!actionType) {
                return;
            }
            let count = getState()[actionType] || 0; //////// <<<<<----------------- ERROR ON THIS LINE. Since the state does not exist, because it is cleared, so there is no actionType in the undefined (the actionType is '@@CLEAR_STATE'), so error come from here
// you should add a check, if there is a state.
            if (actionContext.status !== "DISPATCHED" /* Dispatched */) {
                count++;
            }
            patchState({
                [actionType]: count
            });
        }))
            .subscribe();
    }

Code example:
@Select(actionExecuting(this.authState.login)) onLogin$:Observable<boolean>;

Hello.
I use this library in some of my project and I really appreciate it!
Thank you!

But I have a question for a non-particalar use-case..

I have multiple tables on a single view in my projects.

All tables use the same action for loading data, but with a different parameter (id).

action example:

export class LoadFavoriteListObjects {
  static readonly type =
    '[Users -> Lists] Load objects in the specified favorite list';
  constructor(public favoriteListId: number) {}
}

All tables uses a loading spinner, which is show, while some observable returns no null value.

By the default you would use:

  @Select(actionsExecuting([LoadFavoriteListObjects]))
  isLoading$!: Observable<any>;

but this code will trigger to appear the spinner in all tables simultaneously, while the data is fetched only in one of them...

How can I select actionExecuting parameter (favoriteListId) to compare.
lets say the table knows the id of the list, that the data will be loaded for.

.e.g

@Input()
favoriteListId!: number;

isLoading$!: Observable<any>;

constructor(private store: Store) {}

ngOnInit(): void {
    this.isLoading$ = this.store.select(actionsExecuting([LoadFavoriteListObjects]))
      // I would like to have something like pipe to compare the action id, with the input id.
      .pipe(
        filter((action: LoadFavoritesListObjects) => { return action.favoriteListId === this.favoriteListId; })
      )
    ; 
}

Using actions-executing with Angular 9 causes this warning during runtime:

WARN: ''ActionsExecutingState' class should be decorated with @Injectable() right after the @State() decorator'

Hi there. In certain scenario ActionsExecutingState states values are not working as intended. The state keeps the keys with value = 1, even when the actions are completed.

Can you add an export of the ActionsExecutingState, so I could reset the state (using StateReset() method from ngxs-reset-plugin https://www.npmjs.com/package/ngxs-reset-plugin) ?

Error: node_modules/@ngxs-labs/actions-executing/lib/actions-executing.module.d.ts:7:89 - error TS2339: Property 'ɵNgxsFeatureModule' does not exist on type 'typeof import("<project-dir>/node_modules/@ngxs/store/ngxs-store")'.

7     static ɵmod: i0.ɵɵNgModuleDeclaration<NgxsActionsExecutingModule, never, [typeof i1.ɵNgxsFeatureModule], never>;

We were using ^1.0.3
Fixed when disallow patch upgrade i.e. from ^1.0.3 to 1.0.3

When I try to use @ngxs-labs/actions-executing version 0.1.3 with @ngxs/store version 3.7.1 I get the following error message at runtime:

vendor.js:29044 Error: Uncaught (in promise): Error: Type LifecycleStateManager does not have 'ɵmod' property.
Error: Type LifecycleStateManager does not have 'ɵmod' property.
    at getNgModuleDef (vendor.js:115521)
    at recurse (vendor.js:139485)
    at recurse (vendor.js:139496)
    at recurse (vendor.js:139496)
    at recurse (vendor.js:139496)
    at registerNgModuleType (vendor.js:139481)
    at new NgModuleFactory$1 (vendor.js:139595)
    at Compiler_compileModuleSync__POST_R3__ (vendor.js:142394)
    at Compiler_compileModuleAsync__POST_R3__ [as compileModuleAsync] (vendor.js:142399)
    at MergeMapSubscriber.project (vendor.js:235400)
    at resolvePromise (polyfills.js:3486)
    at resolvePromise (polyfills.js:3440)
    at polyfills.js:3552
    at ZoneDelegate.invokeTask (polyfills.js:2679)
    at Object.onInvokeTask (vendor.js:142788)
    at ZoneDelegate.invokeTask (polyfills.js:2678)
    at Zone.runTask (polyfills.js:2451)
    at drainMicroTaskQueue (polyfills.js:2855)

The compilation of the Angular app works fine (ng serve) but when I open the app in browser, it fails to start (I see a blank page) and the error message appears in the console.

With @ngxs/store version 3.7.0 instead, everything works fine.

I set up my project following the documentation in README.md. Is there any other configuration to apply with the new version of @ngxs/store or is this a bug?

Thank you

We recently moved our Angular project into a monorepo (nx). we noticed that the action execution plugin no longer works!
are there any special configurations when it comes to using this kind of architectures, especially with shared libraries etc. ?

I tried to use this plugin in an application where I have some modules with stores being lazy loaded and it doesn't seem to work.

Tried playing a bit and importing NgxsActionsExecutingModule into feature module instead of app.module seems to work, but I need to import it multiple modules to work so it needs .forChild or something.

Tried debugging a bit and it seems that ngxsOnInit not being triggered when I import NgxsActionsExecutingModule.forRoot() into app.module.

Update: the issue was that I had NgxsModule.forRoot([]) with empty states because my other states were being loaded lazy. This caused ngxsOnInit to not trigger, when I added one initial state into forRoot it started working again.