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.
