Platform: filter is not a function after upgrading to angular 5

[anakinjay]

I'm submitting a...

[X] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Feature request
[ ] Documentation issue or request

What is the current behavior?

attempting to filter on this.actions$ results in the following error:
this.actions$.filter is not a function

Expected behavior:

action$.filter should be available to use in the effect

Minimal reproduction of the problem with instructions:

import { Effect, Actions, toPayload } from '@ngrx/effects';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Store, Action } from '@ngrx/store';

@Injectable()
export class PromiseEffects {
  actionType;

  @Effect()
  promise$: Observable<Action> = this.actions$
   .filter(a => {
      const b = Object(a);
      if (b.payload) {
        return b.payload.constructor.name === 'ZoneAwarePromise';
      } else {
        return false;
      }
    })
    .map(x => {
      const y = Object(x);

      this.actionType = x.type;
      y.payload.then(this.handleFulfill, this.handleReject);

      return { type: this.actionType + '_PENDING' };
    });


  constructor(private actions$: Actions, private store$: Store<any>) { }

  handleReject = reason => {
    this.store$.dispatch({
      type: this.actionType + '_REJECTED',
      payload: reason
    });
  }

  handleFulfill = successValue => {
    this.store$.dispatch({
      type: this.actionType + '_FULFILLED',
      payload: successValue.data
    });
  }
}

Version of affected browser(s),operating system(s), npm, node and ngrx:

node 8.1.3
npm 5.5.1
ngrx 4.1.1

Other information:

This effect scans the payload of all actions for a promise, and if found hooks in pending, rejected, or fulfilled action dispatches. It has worked wonderfully for dozens of projects, but after upgrading to angular 5 it has stopped working.

Seems like filter is no longer accessible from the Actions object type but I can't seem to figure out why or what would cause that.

Not sure if related, but I also upgrade NGRX from 4.0.2 to 4.1.1 at the same time.

[anakinjay]

Here's some more info:
Previously with Angular 4:

you can see filter is defined.

After upgrading to Angular 5:

filter is now undefined.

[brandonroberts]

This is not a bug in ngrx. We don't patch any operators on the Observable prototype to prevent side events, so you must explicitly add your own operators that you use. More than likely, the Observable was being patched from somewhere else.

[anakinjay]

ok, sorry about that then, thank you!

[anakinjay]

In case anyone stumbles across this in the future, I had to add the filter and map methods to the NGRX Effects Actions prototype to get it to work:

import { Effect, Actions, toPayload } from '@ngrx/effects';
import { filter } from 'rxjs/operator/filter';
import { map } from 'rxjs/operator/map';
Object.assign(Actions.prototype, {  map, filter });

That solves the issue.

[brandonroberts]

I would not recommend doing this. If you're using RxJS 5.5 or greater, you should use the new pipe syntax.

import { filter } from 'rxjs/operators';

  this.actions.pipe(filter(() => boolean));

Otherwise, you need to import the operators

import 'rxjs/add/operator/filter';

[anakinjay]

thank you so much @brandonroberts ! using pipe works perfectly and feels a lot safer. Thanks again!!