NGXS no longer functions properly when upgrading to Angular 9 and enabling Ivy

I am currently in the process of upgrading my Angular application to version 9. I have encountered an issue where everything runs smoothly when Ivy is disabled, but enabling Ivy causes the application's serve task to not finish correctly:

Here is a snippet from one of my components:

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}`]));
  }
}

Below is a section of my state management code:

@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))
    );
  }
}

Lastly, here is a segment related to one of my actions:

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

I am encountering some errors in my Typescript and 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; }'.

... (additional similar error messages)

The main issue centers around the Action type:

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

Removing the line 'static readonly type = '[Cart] Create';' eliminates one of the errors, but it is necessary for defining the type for Actions.

static readonly type = '[Cart] Create';

What steps should I follow to resolve these issues?

Thank you.

Answer №1

It seems there is a mistake in how you are utilizing the action within the action stream (_actions$).

Consider revising your code from:

ofActionSuccessful(this.addItem(plan)),

to:

ofActionSuccessful(Cart.AddItem),

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Mat-dialog not filtering JSON data properly due to filter buttons not combining logic

I'm currently working on developing a filter component, and I've encountered an issue. When I select both Buy it Now and Private Auction options, they function independently but not together. If an item has both Buy It Now and Private Auction ena ...

What is the best way to utilize the fresh Sanitizer API in Typescript?

Everything seems to be working well on Codepen, even without using window. It's surprising because I'm used to having to use window.x if ( 'Sanitizer' in window ) { console.log( 'sani', 'Sanitizer' in window ); } ...

What is the reason behind TypeScript mandating the invocation of super() by the inheriting class, even when the parent class does not have

Just starting out with class-based programming, I've been tinkering with a TypeScript API. Here's the scenario: import { Router } from "express"; export default class BaseController { public router = Router(); } and then I create another cl ...

What is the best way to utilize one service within another service without the need for providers array or providedIn?

How can I use Service1 inside Service2 without having to declare it as a Singleton by defining it in the providers array of a module or using providedIn in the service definition? Instead, I would like to use it at the component level, similar to how we u ...

Searching for several arrays in Angular

Hello everyone, I have an API that returns data like this: [ [{ "id": 1, "qte": 12, "date_creation": "2020-08-17T00:00:00+02:00", "date_update": "2020-08-17T00:00:00 ...

Guide on incorporating Angular 13 library with bundled SASS integration

When utilizing Angular 13 and ng-packagr to publish SASS mixins with a library, it is essential to not only add the library to the exports section in the package.json file but also declare an assets block in the ng-package.json file. For detailed instruct ...

Having trouble integrating NEXT AUTH with Firebase due to an error: "Cannot import statement outside

Let's take a look at our firebase configuration file: import { getFirestore } from "firebase/firestore"; export const firebaseConfig = { apiKey: process.env.FIREBASE_API_KEY, authDomain: process.env.FIREBASE_AUTH_DOMAIN, projectId: pr ...

Recommendations for organizing code with respect to models in Angular using TypeScript

Within my C# backend, I structure my entities and entity lists using classes. Any needed functions or methods are simply added to the corresponding class. On the contrary, in Angular/TypeScript examples, models are typically defined as interfaces. This ra ...

Issue encountered: The .scss loader did not yield a string following the upgrade to cli version 7.3.6

After using ng update to upgrade my project, I encountered the following error when running ng build --prod: ERROR in The loader "...\ClientApp\src\app\nav-menu\nav-menu.component.scss" didn't return a string. Here is a li ...

Retrieving information as the user navigates to the next page

Currently, I am using an API endpoint that retrieves over 1000 data objects and delivers them to the user. I believe this method is not efficient since only 30 objects are displayed at once. Is there a more efficient way to load these objects, perhaps in ...

Is there a way to integrate TypeScript into the CDN version of Vue?

For specific areas of my project, I am utilizing the Vue CDN. I would like to incorporate Typescript support for these sections as well. However, our technical stack limitations prevent us from using Vue CLI. Is there a method to import Vue.js into a bas ...

Testing the HTTP context in Angular using unit tests

I've implemented an API call in my service import { HttpContext } from '@angular/common/http'; export const SET_INVALID_TOKEN = new HttpContextToken(() => false); ... postSomething() { this.httpClient.post<MyModel>(`${th ...

"Using the map function in Javascript to iterate through an array and then implementing

I am working on a script that involves an array of the alphabet along with two sets of values. The goal is to determine if a given value falls within the range specified by these two values and then print out the corresponding letter from the alphabet. H ...

The module 'angular/common' was not found in the Angular 2 TypeScript

While experimenting with a sample login form in Angular 2, I encountered an issue when trying to import 'Form_Directives' as: import { FORM_DIRECTIVES } from '@angular/common'; An error was displayed stating that the angular/common m ...

Retrieve individual data record from AngularFireDatabase

Welcome to my blog showcasing various screenshots: https://i.sstatic.net/cAtci.png My current focus is on retrieving a single course using its id, and I have the following code snippet for that purpose: Service: getSingle(uid: string) { return thi ...

The Angular variable binding issue persists upon reloading the page or browser, yet functions seamlessly when navigating between routes

My subscribe button displays the text "Subscribe" when the page loads, but upon reloading the page, the text disappears. The button text is controlled by TypeScript code, and strangely, when I navigate to another route, the text magically reappears. HTML ...

I'm experiencing issues with my Ionic application Dockerize not properly functioning in the browser

I'm currently working on an Ionic study app in order to familiarize myself with Docker. I have completed all the necessary steps to create the image: 1. First, I created the Dockerfile with the following scripts: FROM node:18.10.0-alpine3.15 WORKDIR ...

What is the best way to design a personalized legend in ng2-charts with full customizable options such as click functions and color schemes in Angular

In my current project involving Angular 4 and Ionic 3, I am using ng2 pie charts to display multiple data arrays. However, when the data in an array increases, the legend width also increases causing the chart to disappear because of the large data volume. ...

Different categories of "areas" found in TypeScript within Visual Studio 2013

In C#, we often use "regions," but unfortunately that feature is missing in TypeScript. Is there a way to group code sections in TypeScript? I came across this article on Stack Overflow discussing the absence of regions in TypeScript. I'm curious if ...

The closeOnClickOutside feature seems to be malfunctioning in the angular-2-dropdown-multiselect plugin

I'm currently using 2 angular-2-dropdown-multiselect dropdowns within a bootstarp mega div. The issue I'm facing is that when I click on the dropdown, it opens fine. However, when I click outside of the dropdown, it doesn't close as expected ...