How to wait return statement if subscriber not completed in angular 2/4/6

Question

Currently I am working on the Angular6 project, and I have auth-http-interceptor. The problem in this file is that I want to get refresh token/acquire token from angular4-adal service every time, and for that, I have to subscribe the acquire token which will give the token and then want to assign that token in authReq object.

But my intercept method's return type is Observable.

Then how could I wait for subscribing the acquire token and then return next.handle(authReq). I have tried to write the below code, but its throwing an error => A function whose declared type is neither 'void' nor 'any' must return a value.

auth-http-interceptor.ts

@Injectable()
export class AuthHttpInterceptor implements HttpInterceptor {
    constructor(private adalService: AdalService, private loaderService: LoaderService) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        this.adalService.acquireToken('###myTenantId').subscribe((token) => {
            this.loaderService.display(true);
            const authReq = req.clone({
                url: environment.apiUrl + req.url,
                headers: req.headers
                .set('Content-Type', 'application/json')
                .set('Authorization', 'Bearer ' + token)
            });
        return next.handle(authReq).finally(() => this.loaderService.display(false));
        });
    }
}

Any help is appreciated.

You cannot return from `subscribe`. Instead you could use `flatMap`. — AT82, Jul 27 '18 at 06:27
It is not working. Same error ocurring. I have used this.adalService.acquireToken('###myTenantId').flatMap((token) => { — Er Vipin Sharma, Jul 27 '18 at 07:00
sorry, you need to put `return` in front. `return this.adalService.acquireToken( .....` — AT82, Jul 27 '18 at 07:19
No. it says Type 'Subscription' is not assignable to type 'Observable>'. Property '_isScalar' is missing in type 'Subscription'. — Er Vipin Sharma, Jul 27 '18 at 07:23

AT82 · Accepted Answer · 2018-07-27T07:51:55.110

1

You are missing a return and also you cannot return anything from subscribe. You could use flatMap to first fetch the token, and then return the request, also re-place your finally and you should have some kind of error handler as well:

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return this.adalService.acquireToken('###myTenantId').flatMap((token) => {
        this.loaderService.display(true);
        const authReq = req.clone({
            url: environment.apiUrl + req.url,
            headers: req.headers
            .set('Content-Type', 'application/json')
            .set('Authorization', 'Bearer ' + token)
        });
      return next.handle(authReq);
    })
    .catch((err) => {
      // error handling here
      return Observable.throw(err)
    })
    .finally(() => this.loaderService.display(false));
}

edited Jul 27 '18 at 07:51

answered Jul 27 '18 at 07:33

AT82

71,416
24
140
167

its working, but catch condition throwing error. if i do .catch((err) => { console.log(err); }) it throws an error => Argument of type '(err: any) => void' is not assignable to parameter of type '(err: any, caught: Observable>) => ObservableInput<{}>'. Type 'void' is not assignable to type 'ObservableInput<{}>'. – Er Vipin Sharma Jul 27 '18 at 07:49
1

`return Observable.throw(err)` – AT82 Jul 27 '18 at 07:51
Great, glad to hear! :) :) Have a nice day and happy coding! – AT82 Jul 27 '18 at 08:03
Hi @AJT_82, could you please look once my another question on angular: https://stackoverflow.com/questions/51554591/type-boolean-is-not-assignable-to-type-observableinput – Er Vipin Sharma Jul 27 '18 at 09:12

How to wait return statement if subscriber not completed in angular 2/4/6

1 Answers1

Linked