Search code examples
angularfirebaseionic-frameworkngrx

Property 'map' does not exist on type 'OperatorFunction<Action, never>'.ts(2339)


I'm new to ngrx and following a not that old tutorial but it seems the way "map", "ofType", "of" and "pipe" are used, have changed, so "map" and "of" are throwing errors

"map" error : Property 'map' does not exist on type 'OperatorFunction'.ts(2339)

and

"of" error:// Property 'of' does not exist on type 'typeof Observable'.ts(2339)

Here is the Action:

export class GetUser implements Action {
     readonly type = GET_USER;
     constructor(public payload?: any) { }
}

Hereis the Effect:

@Effect()
 getUser: Observable<Action> = this.actions.pipe(ofType(userActions.GET_USER)
      **.map**((action: userActions.GetUser) => action.payload)
      .switchMap(payload => this.afAuth.authState)
      .delay(2000)
      .map(authData => {
           if (authData) {
                const user = new User(authData.uid, authData.displayName);
                return new userActions.Authenticated(user);
           } else {
                return new userActions.NotAuthenticated();
           }
      }).catch(err => Observable.**of**(new userActions.AuthError()));

Solution

  • Seems like this is using an older version of RxJS. Since version 6 (I believe), pipeable operators should be used. These are imported from 'rxjs/operators', e.g. import { map } from 'rxjs/operators';

    @Effect()
     getUser: Observable<Action> = this.actions.pipe(ofType(userActions.GET_USER)
          ,map((action: userActions.GetUser) => action.payload)
          ,switchMap(payload => this.afAuth.authState)
          ,delay(2000)
          ,map(authData => {
               if (authData) {
                    const user = new User(authData.uid, authData.displayName);
                    return new userActions.Authenticated(user);
               } else {
                    return new userActions.NotAuthenticated();
               }
          });
    

    See the docs https://rxjs-dev.firebaseapp.com/guide/operators