I am having a use case where I need to limit the number of outgoing http requests. Yes, I do have rate limiter on the server-side but a limit on the number of active http requests is also need on the front end too.For that reason I am attempting to implement a sliding window protocol where at any single time I will only have n active requests.

This approach using Rxjs works fine in general, see here:
<https://jsbin.com/pacicubeci/1/edit?js,console,output>

but I am not clear how to use the same logic with http interceptors. My attempt below fails at compile time with the following error:

*Type 'Subscription' is missing the following properties from type 'Observable<HttpEvent>': \_isScalar, source, operator, lift, and 114 more.(2740)*

With that, how can I return an observable and maintain a queue at the http interceptor at the same time?Is my approach flawed? Can I use http interceptors to http rate limit at all?

```
@Injectable()
export class I1 implements HttpInterceptor {
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    const modified = req.clone({ setHeaders: { "Custom-Header-1": "1" } });

    return next
      .handle(req)
      .do((ev: HttpEvent<any>) => {
        if (ev instanceof HttpResponse) {
          console.log(ev);
        }
      })
      .pipe(
        bufferTime(1000, null, 1),
        filter(buffer => buffer.length > 0),
        concatMap(buffer => of(buffer).pipe(delay(1000)))
      )
      .subscribe(console.log);
      }
    }

```

<https://stackblitz.com/edit/angular-interceptors-npqkjp?file=app/interceptors.ts>