NgRX effects - Type 'Observable<unknown>' is not assignable to type 'Observable<Action>'

Question

While working with NgRX 8 my colleagues and me are frequently facing a weird error message when implementing the effects.

Type 'Observable<unknown>' is not assignable to type 'Observable<Action> | ((...args: any[]) => Observable<Action>)'

It is related to type issues. It is really annoying that the message is so unspecific and it marks the complete effect. This appears frequently and is really hard to resolve.

We are wondering if there is something we can do in order to quickly identify the problems or if we are able to destructure the message in some way. I am not looking for a specific solution here, but more for a "how to quickly determine what's wrong"-procedure.

Thanks and cheers!

Collection of possibilities

It is what we have done so far and also ideas from comments and answers.

• In most cases it is probably not an issue with actions
• It can be a wrong destructuring for the switchMap parameter
• One of the RxJS operators is not imported
• Wrong parameters and return value in the service can be the reason
• Inconsistent types in service and action can be the reason as well
• If nothing helps and you are sure, there is nothing wrong: Reload TypeScript

We are still hoping for a trick to break down the error message.

Answer 1

Quick version
comment out createEffect(() =>,
fix errors that your IDE (VSCode) flags up,
add createEffect(() => back in.

Alternative - rewriting like the following also works

someEffect$ = createEffect(() => {
  return this.actions$.pipe(
    ...
  )
})

Additional

No errors after doing the above? Type-checking is doing it's job correctly and telling you that you should be mapping to an Observable<Action> or for a purely side-effect effect adding the second argument { dispatch: false } (i.e. not dispatching an action). See the NgRx Effects Docs

---

Older Answer (using @Effect is unneccessary and is not required)

The easiest way I've found to debug is to write in a version 7 manner with the @Effect decorator and once done rewrite using createEffect.

So to debug:

  navigateToDashboard$ = createEffect(() =>
    this.actions$.pipe(
      ofType(teamActions.CREATE_SUPERVISOR_GROUP_SUCCESS),
      map((action: teamActions.CreateSupervisorGroupSuccess) => action.payload),
      map((team: Team) => team.TeamID),
      SwitchMap(id => new routerActions.Go({ path: ['/team', id, 'populate'] }))
    )
  )

which gives the non-helpful error write as (add decorator, delete createEffect(() =>, delete final bracket),

@Effect()
navigateToDashboard$ = this.actions$.pipe(
    ofType(teamActions.CREATE_SUPERVISOR_GROUP_SUCCESS),
    map((action: teamActions.CreateSupervisorGroupSuccess) => action.payload),
    map((team: Team) => team.TeamID),
    SwitchMap(id => new routerActions.Go({ path: ['/team', id, 'populate'] }))
)

Now we get error

Cannot find name 'SwitchMap'

Followed by

Type 'Go' is not assignable to type 'ObservableInput<any>'

Fixing this gives

@Effect()
navigateToDashboard$ = this.actions$.pipe(
    ofType(teamActions.CREATE_SUPERVISOR_GROUP_SUCCESS),
    map((action: teamActions.CreateSupervisorGroupSuccess) => action.payload),
    map((team: Team) => team.TeamID),
    switchMap(id => of(new routerActions.Go({ path: ['/team', id, 'populate'] })))
)

Now rewrite in NgRx 8 terms. Not pretty but works.