Using httpOptions in Angular 7 http.get method changes result type

Question

I'm somewhat new to Angular. I just want to load some products from an API and then create instances of my class (not just objects 'shaped' to my class). So I have a constructor on my Product class that will copy the incoming values.

Here's my method in the service class, which works fine.

getProductList(): Observable<Product[]> {
    return this.http
        .get<Product[]>(this.productListUrl)
        .pipe(
            map(data => data.map(item => new Product(item))),
            catchError(this.handleError));
}

However, I also want to pass a token in the GET request header for authentication. So I'm adding an httpOptions object to the get method call (with an Authorization key/value set in the httpOptions):

@Injectable()
export class ProductService {

// http options used for making API calls
private httpOptions: any;

private apiURL = environment.apiURL;
private productListUrl = this.apiURL + '/api/v1/products/';

constructor(private http: HttpClient) {
    this.httpOptions = {
        headers: new HttpHeaders({'Content-Type': 'application/json'}),
        observe: 'events'
    };
}

getProductList(): Observable<Product[]> {
    return this.http
        .get<Product[]>(this.productListUrl, this.httpOptions)
        .pipe(
            map(data => data.map(item => new Product(item))),
            catchError(this.handleError));
}

private handleError(res: HttpErrorResponse | any) {
    console.error(res.error || res.body.error);
    return observableThrowError(res.error || 'Server error');
}
}

But somehow the addition of the httpOptions argument to the get method causes the return type to change, and the compile now complains Property 'map' does not exist on type 'HttpEvent<Product[]>'. and won't compile.

Any thoughts on whether I'm doing this wrong, or how I would change the way I'm using map? Thanks!