Angular 12.0.6: reader.readAsText is not a function

[cjohn001]

Environment

• CLI: 8.0.2

• Cross-platform modules:

• Android Runtime: 8.0.0

• iOS Runtime: JSC and "@nativescript/ios": "rc",

• Plugin(s):
  "@apollo/client": "~3.3.21",
  "apollo-angular": "~2.6.0",
  "apollo3-cache-persist": "~0.9.1",
  "graphql": "^15.5.1",
  "graphql-tag": "^2.12.5",

• NativeScript-Angular: "@nativescript/angular": "~12.0.6",

• Angular: "~12.1.2"

Describe the bug
I am using an Apollo Angular client in my app. I just tried to migrate to Angular 12 with the app. Unfortunately, the Apollo client is not able to resolve http requests anymore. The apollo watch (watchQuery) Observable always errors out with the following error message:

reader.readAsText is not a function. (In 'reader.readAsText(blob)', 'reader.readAsText' is undefined)

To Reproduce
I assume the issue is directly related to

#15

My hope was Version 12.0.16 fixed it. Unfortunately not the case. I unfortunately do not know how to easily reproduce the issue without Apollo Angular. I hope the error message is helpful. Seems like a function signature is missing.

Expected behavior
HTTP requests are possible in order to fetch data with apollo client

I hope the issue is related to the polyfills. Seems like this was the topic for #15. If someone knows about a workaround, which I could try to get my code running, it would be great if he could post it here! Thanks for your help.

[edusperoni]

@cjohn001 that fix is in @nativescript/zone.js. Did you upgrade that package?

[cjohn001]

@edusperoni: Hello, thanks for taking the time to look into it. I am currently using

"zone.js": "~0.11.4"

and

"@nativescript/zone-js": "2.0.1"

But it unfortunately still does not work. I am seeing these warnings which might be related? Have not got them before trying to switch to Angular 12. React bindings are included in the Apollo package. As I am not using them I assume this should be not the source of the problem.

npm i
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: react-refresh@0.10.0
npm WARN node_modules/react-refresh
npm WARN react-refresh@"^0.10.0" from @nativescript/webpack@5.0.0-dev.5
npm WARN node_modules/@nativescript/webpack
npm WARN dev @nativescript/webpack@"~5.0.0-beta.0" from the root project
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react-refresh@">=0.8.3 <0.10.0" from @pmmmwh/react-refresh-webpack-plugin@0.4.3
npm WARN node_modules/@pmmmwh/react-refresh-webpack-plugin
npm WARN @pmmmwh/react-refresh-webpack-plugin@"^0.4.0" from @nativescript/webpack@5.0.0-dev.5
npm WARN node_modules/@nativescript/webpack

and I have this in my polyfills file:

// Add pre-zone.js patches needed for the NativeScript platform
import '@nativescript/zone-js/dist/pre-zone-polyfills';

// Zone JS is required by default for Angular itself
import 'zone.js';

// Add NativeScript specific Zone JS patches
import '@nativescript/zone-js';

[edusperoni]

@cjohn001

in your src folder create the zone-disable.ts

put this in it:

global['__Zone_disable_nativescript_FileReader'] = true;
// global['__Zone_disable_FileReader'] = true;

do import './zone-disable'; before you import zone.js

see if that works, otherwise uncomment the commented line. Please get back with your results :)

[cjohn001]

@edusperoni : You saved my evening :) It is working now. Thank you very much!

global['__Zone_disable_nativescript_FileReader'] = true;

did the trick. I have not tried out the second one. Let me know if I should do with it instead or as well.

Best regards,
Christoph

[edusperoni]

if that worked then it seems my patch didn't haha

I'll try to solve this in a more definite way.

[cjohn001]

Works without workaround since 14.2, hence I close the issue