HttpInterceptor, Observable weirdness

Why does the following code work (tap.. next callback):

`
intercept(req: HttpRequest, next: HttpHandler): Observable {

let ok: string;
let started = Date.now();

let observable = next.handle(req).pipe(
tap({
// Succeeds when there is a response; ignore other events
next: (event) => {

  if (event instanceof HttpResponse) {
    ok = event.statusText;
  }
},
// Operation failed; error is an HttpErrorResponse
error: (_error) => {
  ok = 'failed'
}

}),
// Log when response observable either completes or errors
finalize(() => {
const elapsed = Date.now() - started;
const msg = ${req.method} "${req.urlWithParams}"
${ok} in ${elapsed} ms.;
})
);

return observable;
}
`

But this does not:

`
intercept(req: HttpRequest, next: HttpHandler): Observable {

let ok: string;
let started = Date.now();
let observable = next.handle(req);

observable.pipe(
tap({
// Succeeds when there is a response; ignore other events
next: (event) => {

  if (event instanceof HttpResponse) {
    ok = event.statusText;
  }
},
// Operation failed; error is an HttpErrorResponse
error: (_error) => {
  ok = 'failed'
}

}),
// Log when response observable either completes or errors
finalize(() => {
const elapsed = Date.now() - started;
const msg = ${req.method} "${req.urlWithParams}"
${ok} in ${elapsed} ms.;
})
);

return observable;
}
`