NGRX Effect Property 'type' is missing in type Observable<any[]>

0
votes

I am upgrading my app from angular from v6 to v7. I am also upgrade the Typescript version to 2.7.2 to 3.1.6

My problem is when I typescript complaints my ngrx effect has property 'type' missing. This is not occur in 2.7.2

It just maybe I'm not understand how the types work. Could you please show me what I am doing wrong here? 

    @Effect()
    login(): Observable<Action> {
        return this.actions$.pipe(
            ofType(AuthActionTypes.LOGIN),
            switchMap((action: LoginAction) => {
                const username = action.username;
                const password = action.password;
                return this.authenticationService.login(username, password)
                    .pipe(
                        switchMap(token => {
                            return [
                                new SetTokenAction({token: token}),
                            ];
                        }),
                        catchError(err => {
                            return [new LoginErrorAction((err))];
                        })
                    );
            })
        );
    }

This is the result of the code

TS2322: Type 'Observable>' is not assignable to type 'Observable'.   Type 'Observable' is not assignable to type 'Action'.     Property 'type' is missing in type 'Observable'.

2
angulartypescriptrxjsngrx

2 Answers

0
votes

Looks like your SetTokenAction and LoginErrorAction are not structurally same. They must have the same structure to make it work. Change your effect to make it work like this:

@Effect()
    login(): Observable<Action> {
        return this.actions$.pipe(
            ofType(AuthActionTypes.LOGIN),
            switchMap((action: LoginAction) => {
                const username = action.username;
                const password = action.password;
                const actions = new Array<Action>();
                return this.authenticationService.login(username, password)
                    .pipe(
                        switchMap(token => {
                            actions.push(new SetTokenAction({token: token}));
                            return actions;
                        }),
                        catchError(err => {
                            actions.push(LoginErrorAction(err));
                            return actions;
                        })
                    );
            })
        );
    }
0
votes

It seems that you have upgraded RxJs version as well.

switchMapand catchError are pipeable operators which require an observable as a return value. In your case there is no need in the second switchCase and it can be replaced with map. 

@Effect()
    login(): Observable<Action> {
        return this.actions$.pipe(
            ofType(AuthActionTypes.LOGIN),
            switchMap((action: LoginAction) => {
                const username = action.username;
                const password = action.password;
                return this.authenticationService.login(username, password)
                    .pipe(
                        map(token => new SetTokenAction({token: token}),
                        catchError(err => of(LoginErrorAction(err))
                    );
            })
        );
    }
``