refactor(http): Improves base64 encoding/decoding with feature detection by SkyZeroZx · Pull Request #67002 · angular/angular

SkyZeroZx · 2026-02-10T18:31:23Z

Use feature detection for Uint8Array.prototype.toBase64 and Uint8Array.fromBase64, falling back to the existing implementation when native support is not available

This is considerably faster when we have sizes like 50kb some like

https://github.com/SkyZeroZx/benchmark-encode-decode-64

encode workaround x 3,732 ops/sec ±2.72% (92 runs sampled)
encode native x 232,185 ops/sec ±1.93% (91 runs sampled)
decode workaround x 258 ops/sec ±2.56% (88 runs sampled)
decode native x 39,383 ops/sec ±1.92% (89 runs sampled)

alan-agius4

LGTM, thanks for this.

JeanMeche · 2026-02-11T16:11:23Z

packages/common/http/src/util.ts

+export function toBase64(buffer: unknown): string {
+  const bytes = new Uint8Array(buffer as ArrayBufferLike);


This looks off. Since toBase64 can get a Blob would it throw ?

I would very much prefer that this function is correctly typed and that the type assertion is made in the transfer cache.

I’ve just updated it. It’s weird, but it doesn’t throw an exception if we pass a Blob; it just sets the Uint8Array length to 0.

Is the Uint8Array array empty if we pass it a blob ?

If we can pass some like

const myBlob = new Blob(['hello' , 'world']) const u8 = new Uint8Array(myBlob) console.log(u8)

JeanMeche · 2026-02-11T17:15:12Z

packages/common/http/src/transfer_cache.ts

            [BODY]:
              req.responseType === 'arraybuffer' || req.responseType === 'blob'
-                ? toBase64(event.body)
+                ? toBase64(event.body as ArrayBufferLike)


Is this correct for a blob? If yes we should at least have a test that would show that this is okay.

I agree, I'll add a test for that and validate it.

Can you also add a comment, because that type assertion doesn't make it obvious

Is this correct for a blob? If yes we should at least have a test that would show that this is okay.

I added a fix in this PR because parsing was needed. I tested it with Protocol Buffer, and I was confused by the response because it was always a Uint8Array (which is curious, since it works fine when setting a Blob). That was misleading on my part. This should fix the issue, and I tested both cases ( Blob and Uint8Array ) to ensure consistency

packages/common/http/src/transfer_cache.ts

alan-agius4

See comments

packages/common/http/src/transfer_cache.ts

SkyZeroZx · 2026-02-18T15:12:28Z

We can rerun the pipeline that the test failed in (hydration_spec.ts), since TransferCache now has asynchronous behavior

alan-agius4

LGTM

…ion (#67002) Use feature detection for `Uint8Array.prototype.toBase64` and `Uint8Array.fromBase64`, falling back to the existing implementation when native support is not available PR Close #67002

Previously, Blob values were passed to `Uint8Array` this resulted in silently producing an empty array (length = 0) without throwing an error, leading to empty cached data PR Close #67002

thePunderWoman · 2026-03-04T15:57:05Z

This PR was merged into the repository. The changes were merged into the following branches:

main: 1f057af
21.2.x: 277ade9

Previously, Blob values were passed to `Uint8Array` this resulted in silently producing an empty array (length = 0) without throwing an error, leading to empty cached data PR Close #67002

thePunderWoman · 2026-03-04T16:50:28Z

This appears to have broken tests in main. We're looking into it.

SkyZeroZx · 2026-03-04T16:54:03Z

This appears to have broken tests in main. We're looking into it.

Could this be related to how tests were written , now that it behaves asynchronously due to the recent changes?

angular/packages/common/http/src/transfer_cache.ts

Lines 269 to 280 in 9e64147

    
           return event$.pipe( 
        
             concatMap(async (event: HttpEvent<unknown>) => { 
        
               // Only cache successful HTTP responses. 
        
               if (event instanceof HttpResponse) { 
        
                 let body = event.body; 
        
                 if (req.responseType === 'blob') { 
        
                   // Note: Blob is converted to ArrayBuffer because Uint8Array constructor 
        
                   // doesn't accept Blob directly, which would result in an empty array. 
        
                   // Type assertion is safe here: when responseType is 'blob', the body is guaranteed to be a Blob 
        
                   const arrayBuffer = await (event.body as Blob).arrayBuffer(); 
        
                   body = toBase64(arrayBuffer); 
        
                 } else if (req.responseType === 'arraybuffer') {

…ngular#67002)" This reverts commit 1f057af.

…e detection (angular#67002)" This reverts commit aafeb1d.

thePunderWoman · 2026-03-04T17:09:49Z

This definitely was the root cause. We're reverting this for now. Please take a look, @SkyZeroZx.

…67002)" This reverts commit 1f057af.

…e detection (#67002)" This reverts commit aafeb1d.

…67002)" This reverts commit 1f057af. (cherry picked from commit 7eb3371)

…e detection (#67002)" This reverts commit aafeb1d. (cherry picked from commit 5338b59)

Previously, Blob values were passed to `Uint8Array` this resulted in silently producing an empty array (length = 0) without throwing an error, leading to empty cached data

Ensure httpResource properly handles the response flow

SkyZeroZx · 2026-03-04T17:52:57Z

packages/common/http/test/resource_spec.ts

@@ -424,15 +425,10 @@ describe('httpResource', () => {

    it('should synchronously resolve with a cached value from TransferState', async () => {


According to my review, this test was failing due to the recent changes to the transfer cache, which now behaves asynchronously.
I'm not sure if we should change the test name or if it's correct.

This change was intentional to ensure there's no loading state when pulling data from the transfer cache. #67307

So I think it would stay as it is, only keeping the change I made due to the TransferCache update

@thePunderWoman With the latest changes, I think it would be okay to merge, or would we still need to adjust something?

pullapprove bot requested a review from AndrewKushnir February 10, 2026 18:31

angular-robot bot added the area: common/http Issues related to HTTP and HTTP Client label Feb 10, 2026

ngbot bot added this to the Backlog milestone Feb 10, 2026

AndrewKushnir requested a review from alan-agius4 February 10, 2026 18:44

alan-agius4 approved these changes Feb 11, 2026

View reviewed changes

JeanMeche reviewed Feb 11, 2026

View reviewed changes

SkyZeroZx force-pushed the refactor/http-from-to-64 branch from bd809c2 to 3fe3545 Compare February 11, 2026 16:59

JeanMeche reviewed Feb 11, 2026

View reviewed changes

SkyZeroZx commented Feb 11, 2026

View reviewed changes

packages/common/http/src/transfer_cache.ts Outdated Show resolved Hide resolved

alan-agius4 requested changes Feb 12, 2026

View reviewed changes

packages/common/http/src/transfer_cache.ts Outdated Show resolved Hide resolved

packages/common/http/src/transfer_cache.ts Outdated Show resolved Hide resolved

SkyZeroZx requested a review from alan-agius4 February 12, 2026 16:10

SkyZeroZx force-pushed the refactor/http-from-to-64 branch from 7e21743 to 62f6ea1 Compare February 12, 2026 20:35

SkyZeroZx force-pushed the refactor/http-from-to-64 branch from 32db6da to 086710c Compare February 19, 2026 01:44

alan-agius4 approved these changes Feb 23, 2026

View reviewed changes

alan-agius4 requested review from JeanMeche and removed request for AndrewKushnir February 27, 2026 07:02

JeanMeche approved these changes Mar 3, 2026

View reviewed changes

JeanMeche added action: merge The PR is ready for merge by the caretaker and removed action: review The PR is still awaiting reviews from at least one requested reviewer labels Mar 3, 2026

thePunderWoman closed this in aafeb1d Mar 4, 2026

thePunderWoman added a commit to thePunderWoman/angular that referenced this pull request Mar 4, 2026

Revert "fix(http): correctly cache blob responses in transfer cache (a…

47ed02b

…ngular#67002)" This reverts commit 1f057af.

thePunderWoman added a commit to thePunderWoman/angular that referenced this pull request Mar 4, 2026

Revert "refactor(http): Improves base64 encoding/decoding with featur…

f9382eb

…e detection (angular#67002)" This reverts commit aafeb1d.

thePunderWoman mentioned this pull request Mar 4, 2026

Revert 67002 #67439

Merged

thePunderWoman reopened this Mar 4, 2026

thePunderWoman added action: cleanup The PR is in need of cleanup, either due to needing a rebase or in response to comments from reviews and removed action: merge The PR is ready for merge by the caretaker labels Mar 4, 2026

thePunderWoman added a commit that referenced this pull request Mar 4, 2026

Revert "fix(http): correctly cache blob responses in transfer cache (#…

7eb3371

…67002)" This reverts commit 1f057af.

thePunderWoman added a commit that referenced this pull request Mar 4, 2026

Revert "refactor(http): Improves base64 encoding/decoding with featur…

5338b59

…e detection (#67002)" This reverts commit aafeb1d.

thePunderWoman added a commit that referenced this pull request Mar 4, 2026

Revert "fix(http): correctly cache blob responses in transfer cache (#…

76431ed

…67002)" This reverts commit 1f057af. (cherry picked from commit 7eb3371)

thePunderWoman added a commit that referenced this pull request Mar 4, 2026

Revert "refactor(http): Improves base64 encoding/decoding with featur…

93c6dc6

…e detection (#67002)" This reverts commit aafeb1d. (cherry picked from commit 5338b59)

SkyZeroZx added 5 commits March 4, 2026 12:32

fix(http): correctly cache blob responses in transfer cache

2acd6ad

Previously, Blob values were passed to `Uint8Array` this resulted in silently producing an empty array (length = 0) without throwing an error, leading to empty cached data

fixup! fix(http): correctly cache blob responses in transfer cache

6a0a9ed

Previously, Blob values were passed to `Uint8Array` this resulted in silently producing an empty array (length = 0) without throwing an error, leading to empty cached data

fixup! fix(http): correctly cache blob responses in transfer cache

e9eaf18

Previously, Blob values were passed to `Uint8Array` this resulted in silently producing an empty array (length = 0) without throwing an error, leading to empty cached data

fixup! fix(http): correctly cache blob responses in transfer cache

63f083d

test(http): correct response handling in httpResource

8312083

Ensure httpResource properly handles the response flow

SkyZeroZx force-pushed the refactor/http-from-to-64 branch from 086710c to 8312083 Compare March 4, 2026 17:51

angular-robot bot requested a review from JeanMeche March 4, 2026 17:51

SkyZeroZx commented Mar 4, 2026

View reviewed changes

		export function toBase64(buffer: unknown): string {
		const bytes = new Uint8Array(buffer as ArrayBufferLike);

		@@ -424,15 +425,10 @@ describe('httpResource', () => {

		it('should synchronously resolve with a cached value from TransferState', async () => {

Conversation

SkyZeroZx commented Feb 10, 2026

Uh oh!

alan-agius4 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JeanMeche Feb 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

alan-agius4 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

SkyZeroZx commented Feb 18, 2026

Uh oh!

alan-agius4 left a comment

Choose a reason for hiding this comment

Uh oh!

thePunderWoman commented Mar 4, 2026

Uh oh!

thePunderWoman commented Mar 4, 2026

Uh oh!

SkyZeroZx commented Mar 4, 2026

Uh oh!

thePunderWoman commented Mar 4, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

JeanMeche Feb 11, 2026 •

edited

Loading