Flow JS SDK in Angular Framework

Based on the Flow App Quickstart ( https://docs.onflow.org/flow-js-sdk/flow-app-quickstart ), I am looking to rebuild the example using the flow-js-sdk with the Angular Framework.

However, the flow-js-sdk has a dependent library “@improbable-eng/grpc-web” which is using the http and https modules. Those modules cannot be used in the Angular web framework since version 6.

I am getting the following errors when running “ng serve”: Error: ./node_modules/@improbable-eng/grpc-web-node-http-transport/lib/index.js Module not found: Error: Can't resolve 'http' in '...\node_modules\@improbable-eng\grpc-web-node-http-transport\lib' Error: ./node_modules/@improbable-eng/grpc-web-node-http-transport/lib/index.js Module not found: Error: Can't resolve 'https' in '...\node_modules\@improbable-eng\grpc-web-node-http-transport\lib'

In the open issue https://github.com/onflow/flow-js-sdk/issues/271 it was suggested that it is planned to “remov[e] gRPC completely from the JS-SDK, and will instead be using standard http requests”.

Any timeline on that change? Or any suggested workarounds for the time being?

[KevTale]

Adding this to package.json would hide the issue (but not solve it):

  "browser": {
    "http": false,
    "https": false
  },

What is blocking here - at least in my limited understanding - is that ngcc which is the Angular Compiler tries to compile @improbable-eng package where http and https modules are used. It tries to compile those because some fcl methods like fcl.send ultimately use GRPC which is used in @improbable-eng . Therefor, it tries to compile the package for the browser which should not be the case I believe.

Adding the snippet in package.json tells the compiler to exclude these modules from compiling according to this. However it will obviously leads to a fail while attempting to use fcl for a http call:

ERROR Error: Uncaught (in promise): TypeError: https.request is not a function which refers to this file: webpack:///./node_modules/@improbable-eng/grpc-web-node-http-transport/lib/index.js.

In my opinion, going for a full JSON communication medium is the solution as mention here #321. Especially if it’s solve the issue for other framework like React Native.

That being said, they are other issues with Angular, I encountered some, but they are probably more:

1. Error: Uncaught (in promise): ReferenceError: Buffer is not defined when using a fcl method that uses Buffer (in my case it was send). I don’t know much about it, but a workaround exists by adding this to polyfill.ts:

(window as any).global = window;
// @ts-ignore
window.Buffer = window.Buffer || require('buffer').Buffer;

1. I realized that the Dapper Discovery Wallet (testnet) block the Angular localhost (http://localhost:4200/) when it allows the React localhost (http://localhost:3000/). It can be solved by ng serve --port=3000 but we should obviously rather add the port 4200 to the allowed domain.

Refused to frame 'https://staging.accounts.meetdapper.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors http://localhost:3000 https://port.staging.onflow.org/ https://staging.accounts.meetdapper.com/ https://kitty-items.on.fleek.co/ https://fcl-harness.vercel.app/ https://flow-view-source.com/".

1. And of course adding TS definiton by adding Definiton Files

[orodio]

Going to close this in favour of: https://github.com/onflow/flow-js-sdk/issues/679