Skip to content

fix: replace FileReader with Blob.text() in Angular blobToText for SSR compatibility#5363

Open
PeterTheOne wants to merge 2 commits intoRicoSuter:masterfrom
PeterTheOne:fix/blobtotex-use-blob-text-for-ssr-compatibility
Open

fix: replace FileReader with Blob.text() in Angular blobToText for SSR compatibility#5363
PeterTheOne wants to merge 2 commits intoRicoSuter:masterfrom
PeterTheOne:fix/blobtotex-use-blob-text-for-ssr-compatibility

Conversation

@PeterTheOne
Copy link
Copy Markdown

Problem

The generated Angular blobToText function uses FileReader, which is a browser-only DOM API. This causes crashes in any non-browser Angular environment:

  • Angular SSR / UniversalReferenceError: FileReader is not defined on every API call, since NSwag sets responseType: 'blob' for all requests and every response (including error bodies) is routed through blobToText
  • NativeScript AngularFileReader.onload event is undefined in NativeScript's runtime (see blobToText in NativeScript Angular -> FileReader event is undefined #3177)
  • Jest / jsdom test environments — depending on jsdom version and configuration, FileReader may not be available or may behave differently
  • Electron main process — Node.js context, no DOM APIs

Because blobToText sits in the hot path of every generated processXxx method (both success and error branches), there is no easy way to work around this without patching the generated output or adding layered interceptors that fight each other.

Fix

Replace FileReader with Blob.text(), which is:

  • Available in all modern browsers (Chrome 76+, Firefox 69+, Safari 14.1+, Edge 79+)
  • Available in Node.js 16+ as a stable global

The change is in File.Utilities.liquid, Angular block only — the AngularJS blobToText is unchanged:

-            let reader = new FileReader();
-            reader.onload = event => {
-                observer.next((event.target as any).result);
-                observer.complete();
-            };
-            reader.readAsText(blob);
+            (blob as Blob).text().then(
+                text => { observer.next(text); observer.complete(); },
+                err => observer.error(err)
+            );

All 8 affected Angular snapshot files have been updated accordingly.

Verification

I have applied this fix locally in an Angular SSR project (Node 18) and the crash is resolved. However I want to be upfront: real-world testing has been limited — I haven't verified all edge cases like large blobs, binary responses, or error body handling across different Angular versions. Additional review and testing from maintainers or other users would be very welcome before merging.

Related issues

Fixes #3177
Related: #1692


Drafted with the help of Claude Code. The root cause analysis, template change, and snapshot updates were done with AI assistance — flagging this for transparency.

FileReader is a browser-only API that crashes in Node.js environments
(Angular SSR / Universal). Blob.text() achieves the same result and is
available in all modern browsers (Chrome 76+, Firefox 69+, Safari 14.1+)
and Node.js 16+.

Fixes RicoSuter#3177
Related: RicoSuter#1692

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@PeterTheOne PeterTheOne force-pushed the fix/blobtotex-use-blob-text-for-ssr-compatibility branch from f68d5e6 to 81383a9 Compare April 13, 2026 11:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

blobToText in NativeScript Angular -> FileReader event is undefined

1 participant