I have been in the process of upgrading a massive Angular 12 project to Angular 13 and have completed several steps. One significant change was the rewriting of Effects using a newer approach like
createEffect(() =>
instead of
@Effect
However, during the upgrade, some effects ended up broken. To quickly resolve this and prevent errors from occurring in the application, I resorted to using { dispatch: false }. Unfortunately, this was not a proper solution and ended up disrupting the logic flow. I have been meticulously trying to troubleshoot each broken effect one step at a time. There is one particular large effect that throws an error:
https://i.stack.imgur.com/T1By6.png
and strangely enough, it gets resolved by simply commenting out
filter(...),
block or another filter(...), block, or tap(..) within this extensive and complex (multi-line) Effect.
Could there be certain limitations that I am overlooking? Why is this error occurring? Why does it disappear when I comment out small sections of this Effect?
For instance, if I comment out any of the many filters scattered throughout the code, such as this one (parameters renamed):
// filter(
// ([
// param1,
// param2,
// param3,
// param4,
// param5,
// param6,
// param7,
// param8,
// param9,
// param10,
// param11,
// param12
// ]) => !!param11.id
// ),
the error vanishes: https://i.stack.imgur.com/uOor1.png