0

I'm upgrading a huge Angular 12 project to Angular 13 and did many steps. Effects were also rewritten in a newer way such as

createEffect(() =>

instead of

@Effect

Unfortunately, the upgrade caused several effects to be broken. The fast fix to avoid errors and run the app was to apply { dispatch: false }. Unfortunately, that was not a fix and it broke the logic. I've tried to fix each broken effect step by step. For one huge effect the error is: enter image description here which unexpectedly gets fixed by commenting

filter(...),

block , or another filter(...), block, or tap(..) in this large and long (many lines) Effect.

Are there limitations that I'm missing? Why is this error happening? Why it gets fixed by commenting simple pieces of this Effect?

As example, if I comment any of several filters in different places, as example this (params are renamed):

// filter(
//   ([
//     param1,
//     param2,
//     param3,
//     param4,
//     param5,
//     param6,
//     param7,
//     param8,
//     param9,
//     param10,
//     param11,
//     param12
//   ]) => !!param11.id
// ),

the error disappears: enter image description here

Haradzieniec
  • 9,086
  • 31
  • 117
  • 212
  • Does this answer your question? [NgRX effects - Type 'Observable' is not assignable to type 'Observable'](https://stackoverflow.com/questions/57247613/ngrx-effects-type-observableunknown-is-not-assignable-to-type-observable) – Andrew Allen Mar 15 '23 at 11:29
  • The recommended way to write as `createEffect(() => { return this.actions$.pipe(...) })` in order to get correctly typed errors – Andrew Allen Mar 15 '23 at 11:31
  • Andrew Allen, no. As I mentioned in the question, commenting ANY of filters fixes the issue. Does your suggested link explain that behavior? Thank you. – Haradzieniec Mar 15 '23 at 11:35
  • Needs debugging details. The picture error is unhelpful since the error marks the whole effect and could be caused by almost anything hence why I've linked post. Please include error as text and the createEffect code. – Andrew Allen Mar 15 '23 at 11:40
  • Andrew Allen, following your link, choosing the best answer: Quick version comment out createEffect(() =>, fix errors that your IDE (VSCode) flags up, --- If I follow this step to remove createEffect(() => AND remove the last ")" of course to avoid additional closing ")", then it gets compiled successfully, there are no errors in IDE flagged up. – Haradzieniec Mar 15 '23 at 11:48
  • Yep, I wrote that answer :). This tells me you're not mapping to an `Observable` or for a *purely side-effect* effect adding the second argument `{ dispatch: false }`. – Andrew Allen Mar 15 '23 at 11:52
  • Andrew Allen, Unfortunately, I can't share my code here (or should simplify it), but... Yes - I don't use { dispatch: false }. Yes - this is my last line of code tap(() => this.store.dispatch(MyActions.doSomething())). With your guesses, how would you explain commenting the filter removes the compilation error? Any ideas? Thank you very much for your help. – Haradzieniec Mar 15 '23 at 12:06

1 Answers1

0

Adding any has helped:

createEffect((): any => this.actions$.pipe(
Haradzieniec
  • 9,086
  • 31
  • 117
  • 212
  • I see from your first post that you tried `{ dispatch: false }`. Basically effects are built to listen for an action and return a new action. This option works, if you don't need a result action. With `any` you just disable type safety, but your code still has problems. For example, from the error message: `tap(() => this.store.dispatch(...))` cannot work, because tap returns nothing and is only a side effect operator. If this is supposed to be the result action of the effect, then replacing tap with map to: `map(() => yourAction({ param: ... })` might be a solution. – hmartini Mar 25 '23 at 18:35