angular - NGRX Effekt-egenskapen 'type' saknas i typ Observable<any[]>

Jag uppgraderar min app från Angular version 6 till version 7. Jag uppgraderar också Typescript-versionen från 2.7.2 till 3.1.6.

Mitt problem är när jag använder TypeScript får jag felmeddelandet att min ngrx-effekt saknar egenskapen 'type'. Detta inträffar inte i 2.7.2

Det kanske bara är så att jag inte förstår hur typerna fungerar. Kan du vara snäll och visa mig vad jag gör fel här?

    @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))];
                        })
                    );
            })
        );
    }

Det här är resultatet av koden

TS2322: Typen 'Observable>' kan inte tilldelas typen 'Observable'. Typen 'Observable' kan inte tilldelas typen 'Action'. Egenskapen 'type' saknas i typen 'Observable'.

Svar #1

Ser ut som att din SetTokenAction och LoginErrorAction inte är strukturellt lika. De måste ha samma struktur för att det ska fungera. Ändra din effekt för att få det att fungera så här:

@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;
                        })
                    );
            })
        );
    }

Svar #2

Det verkar som att du också har uppgraderat RxJs-versionen.

switchMap och catchError är pipbara operatorer som kräver ett observabelt värde som returvärde. I ditt fall behövs ingen andra switchCase och den kan ersättas med 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))
                    );
            })
        );
    }
``