Angular 17 hydration - AWS URL add twice on SSR to http response

Question

I am trying API response transformation to add the AWS S3 bucket URL as a prefix to the banner URL from the API side. It works correctly without SSR. But when I tried with SSR it added URL prefix twice.

Without SSR

https://shm-stg.s3.ap-south-1.amazonaws.com/dshm-dev/65708131bbcf697cb1c3ac9b/hd/image/thumbnail_watermark/1.jpeg

With SSR

https://shm-stg.s3.ap-south-1.amazonaws.com/dshm-dev/https://shm-stg.s3.ap-south-1.amazonaws.com/dshm-dev/65708131bbcf697cb1c3ac9b/hd/image/thumbnail_watermark/1.jpeg

Here is code for http response transformation

awsUrl = environment.awsUrl;

getEndpoint(): string {
  return API.COLLECTION_HEADING;
}

override get(params: Partial<EntityParams>): Observable<APIResponse<CollectionHeadingListModel[]>> {
  const httpParams = this.createHttpParamsFromPartial(params);
  return this.http.get<APIResponse<CollectionHeadingListModel[]>>(this.getEndpoint(), { params: httpParams }).pipe(
    tap(res => {
      res.data.forEach((heading) => heading.banner = `${this.awsUrl}${heading.banner}`);
    })
  );
}

Its working fine if I remove provideClientHydration() from providers

Any help on this will be really appriciated

Answer 1

Could you try changing the tap into map, since you are modifying the response but not returning.

awsUrl = environment.awsUrl;

getEndpoint(): string {
  return API.COLLECTION_HEADING;
}

override get(params: Partial<EntityParams>): Observable<APIResponse<CollectionHeadingListModel[]>> {
  const httpParams = this.createHttpParamsFromPartial(params);
  return this.http.get<APIResponse<CollectionHeadingListModel[]>>(this.getEndpoint(), { params: httpParams }).pipe(
    map(res => { // <-- changed here
      res.data.forEach((heading) => heading.banner = `${this.awsUrl}${heading.banner}`);
      return res; // <-- changed here
    })
  );
}