Description
Environment
tns info
✔ Getting NativeScript components versions information...
✔ Component nativescript has 8.0.2 version and is up to date.
✔ Component @nativescript/core has 8.0.8 version and is up to date.
✔ Component @nativescript/ios has 8.0.0 version and is up to date.
✔ Component @nativescript/android has 8.0.0 version and is up to date.
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):
- CLI: 8.0.2
- Cross-platform modules: N/A
- Android Runtime: 8.0.0
- iOS Runtime: 8.0.0
- Plugin(s): none
- NativeScript-Angular: ~12.0.0
- Angular: ~12.0.0
Describe the bug
Body.json is throwing an Error after fetch.
CONSOLE ERROR: ERROR Error: Uncaught (in promise): TypeError: reader.readAsText is not a function
TypeError: reader.readAsText is not a function
at readBlobAsText (file: src/webpack:/@nativescript/template-hello-world-ng/node_modules/@nativescript/core/fetch/index.js:189:0)
at Response.Body.text (file: src/webpack:/@nativescript/template-hello-world-ng/node_modules/@nativescript/core/fetch/index.js:295:0)
at Response.Body.json (file: src/webpack:/@nativescript/template-hello-world-ng/node_modules/@nativescript/core/fetch/index.js:312:0)
at myhttp (file: src/webpack:/@nativescript/template-hello-world-ng/src/app/app.component.ts:5:0)
To Reproduce
Call Response.json() in nativescript-angular 12 project. (android or ios)
In my provided example
git clone https://github.com/IanNMarshall/nativescript-angular-fetch-bug.git
cd nativescript-angular-fetch-bug
tns prepare ios && tns build ios && tns run ios
# errors on init
Expected behavior
Response.json() parses response.
Note:
- Error did not occur before nativescript-angular 12
- Error does not occur in pure ts app with same version - typescript 4.2.4
Sample project
Example throws the error on app.component.init:
https://github.com/IanNMarshall/nativescript-angular-fetch-bug
Note: this is just the hello world demo with minimal change to add fetch example.
tns create
# Select Angular, name, Hello World tempate
then added the following:
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,7 +1,24 @@
-import { Component } from '@angular/core'
+import { Component, OnInit } from '@angular/core'
+
+export async function myhttp(
+ request: RequestInfo
+): Promise<any> {
+ const response = await fetch(request);
+ const body = await response.json();
+ return body;
+}
@Component({
selector: 'ns-app',
templateUrl: './app.component.html',
})
-export class AppComponent {}
+export class AppComponent implements OnInit {
+
+ constructor() {}
+
+ ngOnInit() {
+ console.log("MyApp - onInit");
+ const body = myhttp("https://jsonplaceholder.typicode.com/todos");
+ body.then(body => console.log("MyApp - response", body));
+ }
+}
Here's an example of it working with same {N} and typescript versions:
https://github.com/IanNMarshall/nativescript-ts-only-fetch-working