NGXS doesn't work when update to Angular 9 with Ivy enabled

Viewed 364

I'm trying to update my application to Angular 9. Everything runs fine when I disable the Ivy, but with Ivy enabled the application doesn't finish the serve task correctly:

My component:

choosePlan(plan: IPlan) {
  if (!this.isAddressValid()) {
    this._toastService.error('Informe o seu CEP!', '', { positionClass: 'toast-top-right' });
  } else {
    this._actions$
      .pipe(
        ofActionSuccessful(this.addItem(plan)),
        tap(() => this._clearUtms())
      )
      .subscribe(() => this._router.navigate([`/checkout/carrinho/${this.cart.id}`]));
  }
}

My state:

@State<CartStateModel>({
  name: 'cart',
  defaults: {
    cart: {},
  },
})
@Injectable()
export class CartState {
  @Action(Cart.AddItem)
  addItem(ctx: StateContext<CartStateModel>, action: Cart.AddItem): Observable<ICart> {
    const currentState = ctx.getState();

    return zip(this.address$, this.shipping$).pipe(
      mergeMap((obs: [IAddress, IShippingType]) =>
        this._cartService.addItemToCart(
          currentState.cart.id,
          action.itemToAdd,
          obs[0].cep,
          obs[1].shippingMethodId
        )
      ),
      tap((cart: ICart) => ctx.setState({ cart: cart })),
      take(1),
      catchError((error: any) => throwError(error))
    );
  }
}

My action:

export class Create {
  static readonly type = '[Cart] Create';
  constructor(public itemToAdd: ICartItemToAdd) {}
}

The error of VS Code from Typescript: Here the image: error from typescript code

Argument of type 'AddItem | Create' is not assignable to parameter of type 'ActionType'.
  Type 'AddItem' is not assignable to type 'ActionType'.
    Property 'type' is missing in type 'AddItem' but required in type '{ type: string; }'.

The error of angular cli:

: Compiled successfully.

ERROR in src/app/core/product/pages/product.component.ts:87:30 - error TS2345: Argument of type 'Create | AddItem' is not assignable to parameter of type 'ActionType'.
  Type 'Create' is not assignable to type 'ActionType'.
    Property 'type' is missing in type 'Create' but required in type '{ type: string; }'.

87           ofActionSuccessful(this.addItem(plan)),
                                ~~~~~~~~~~~~~~~~~~

  node_modules/@ngxs/store/src/actions/symbols.d.ts:6:5
    6     type: string;
          ~~~~
    'type' is declared here.
src/app/core/checkout/pages/cart/cart.component.ts:67:46 - error TS2345: Argument of type 'RemoveItem' is not assignable to parameter of type 'ActionType'.
  Property 'type' is missing in type 'RemoveItem' but required in type '{ type: string; }'.

67       this._actions$.pipe(ofActionSuccessful(action)).subscribe(() => this._getCart());
                                                ~~~~~~

  node_modules/@ngxs/store/src/actions/symbols.d.ts:6:5
    6     type: string;
          ~~~~
    'type' is declared here.
src/app/core/checkout/pages/cart/cart.component.ts:72:44 - error TS2345: Argument of type '(Reset | Reset | Reset | Reset | Reset | Reset | Reset)[]' is not assignable to parameter of type 'ActionType'.
  Property 'type' is missing in type '(Reset | Reset | Reset | Reset | Reset | Reset | Reset)[]' but required in type '{ type: string; }'.

72     this._actions$.pipe(ofActionSuccessful(this._checkoutFacadeService.resetStates())).subscribe();
                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  node_modules/@ngxs/store/src/actions/symbols.d.ts:6:5
    6     type: string;
          ~~~~
    'type' is declared here.
src/app/core/checkout/guards/cart-resume/cart-resume.resolver.ts:22:27 - error TS2345: Argument of type 'Fetch' is not assignable to parameter of type 'ActionType'.
  Property 'type' is missing in type 'Fetch' but required in type '{ type: string; }'.

22         ofActionCompleted(cartAction),
                              ~~~~~~~~~~

  node_modules/@ngxs/store/src/actions/symbols.d.ts:6:5
    6     type: string;
          ~~~~
    'type' is declared here.

The error is about the type of Action:

export namespace Cart {
  export class Create {
    static readonly type = '[Cart] Create';
    constructor(public itemToAdd: ICartItemToAdd) {}
  }
}

One of these errors is gone when I remove the line:

static readonly type = '[Cart] Create';

But I can't, because the Actions need a type.

My package follow below with version of packages:

"dependencies": {
  "@angular/animations": "^9.1.13",
  "@angular/cdk": "^9.2.4",
  "@angular/common": "^9.1.13",
  "@angular/compiler": "^9.1.13",
  "@angular/core": "^9.1.13",
  "@angular/forms": "^9.1.13",
  "@angular/material": "^9.2.4",
  "@angular/material-moment-adapter": "9.2.4",
  "@angular/platform-browser": "^9.1.13",
  "@angular/platform-browser-dynamic": "^9.1.13",
  "@angular/router": "^9.1.13",
  "@angular/service-worker": "^9.1.13",
  "@celulardireto/ui-lib": "^0.34.3",
  "@glidejs/glide": "^3.3.0",
  "@ngxs-labs/dispatch-decorator": "^2.1.0",
  "@ngxs/devtools-plugin": "^3.6.0",
  "@ngxs/logger-plugin": "^3.6.0",
  "@ngxs/storage-plugin": "^3.6.0",
  "@ngxs/store": "^3.6.0",
  "@types/scriptjs": "^0.0.2",
  "apollo-angular": "^1.10.0",
  "apollo-angular-link-http": "^1.11.0",
  "apollo-cache-inmemory": "^1.6.6",
  "apollo-client": "^2.6.10",
  "apollo-link": "^1.2.14",
  "card-validator": "^6.2.0",
  "core-js": "^2.5.4",
  "date-fns": "^2.4.1",
  "graphql": "^15.3.0",
  "graphql-tag": "^2.11.0",
  "hammerjs": "^2.0.8",
  "karma-spec-reporter": "^0.0.32",
  "lazysizes": "^5.2.0",
  "material-design-icons": "^3.0.1",
  "moment": "2.24.0",
  "ng-recaptcha": "^7.0.1",
  "ngx-device-detector": "^2.0.5",
  "ngx-mask": "9.1.4",
  "ngx-toastr": "11.3.3",
  "node-sass": "^4.13.0",
  "remove-accents": "^0.4.2",
  "rxjs": "^6.5.3",
  "scriptjs": "^2.5.9",
  "string-mask": "0.3.0",
  "tslib": "^1.10.0",
  "zone.js": "~0.10.2"
},

What can I do?

Regards.

1 Answers

You aren't using the action in the action stream (_actions$) correctly.

Try changing

ofActionSuccessful(this.addItem(plan)),

to

ofActionSuccessful(Cart.AddItem),
Related