Angular 13 example for Relay #515

jemboh · 2022-02-10T21:03:21Z

Problem

As a web developer in 2022
I want to easily be able to use js-waku with Angular
So I can build awesome dapps with my favourite framework

Solution

Here's an example send/receive messaging implementation with Angular, similar to the ReactJS one.

Notes

Resolves Angular example #320
Documentation PR

There is a third-party library 'time-cache' that does not have types and is causing all sorts of problems. Including some quite general types here to get it working. If successful, I'll get it submitted to DefinitelyTyped so it's a one-line install for the future and it won't need to be included in the repo.

This is a 'known' bug in a few libraries that use Angular 12. It was causing the app to not start properly but with some pretty unhelpful messaging.

Created a very much non-best practice copy of the reactjs example to connect to status nodes and send/receive messages and then display them. Quite a few polyfills and manual type definitions needed in order to get this running smoothly.

D4nte · 2022-02-10T23:16:27Z

@jemboh I am getting an error. I did a fresh checkout.

Best if you also add the example and the commands to test it as part of the CI so that if we change the js-waku API, we don't forget to change the example and the doc.

js-waku/examples/relay-angular-chat  angular-js-example-for-relay ✔                                                                                                             2h15m  
▶ npm i
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated

added 937 packages, and audited 939 packages in 17s

93 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

js-waku/examples/relay-angular-chat  angular-js-example-for-relay ✔                                                                                                             2h15m  
▶ ng build
✔ Browser application bundle generation complete.

Warning: /home/froyer/src/status-im/js-waku/examples/relay-angular-chat/src/app/app.component.ts depends on 'protons'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies



Error: ../../node_modules/libp2p-interfaces/dist/src/pubsub/index.d.ts:328:26 - error TS7016: Could not find a declaration file for module 'bl'. '/home/froyer/src/status-im/js-waku/node_modules/bl/bl.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/bl` if it exists or add a new declaration (.d.ts) file containing `declare module 'bl';`

328 type BufferList = import('bl');
                             ~~~~


Error: ../../node_modules/libp2p-interfaces/dist/src/stream-muxer/types.d.ts:1:24 - error TS7016: Could not find a declaration file for module 'bl/BufferList'. '/home/froyer/src/status-im/js-waku/node_modules/bl/BufferList.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/bl` if it exists or add a new declaration (.d.ts) file containing `declare module 'bl/BufferList';`

1 import BufferList from 'bl/BufferList'
                         ~~~~~~~~~~~~~~~


Error: ../../node_modules/libp2p-interfaces/dist/src/transport/types.d.ts:1:24 - error TS7016: Could not find a declaration file for module 'bl/BufferList'. '/home/froyer/src/status-im/js-waku/node_modules/bl/BufferList.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/bl` if it exists or add a new declaration (.d.ts) file containing `declare module 'bl/BufferList';`

1 import BufferList from 'bl/BufferList'
                         ~~~~~~~~~~~~~~~


Error: Optimization error [main.6f8dd7503287416b.js]: Error: Transform failed with 1 error:
main.6f8dd7503287416b.js:45059:32: ERROR: Big integer literals are not available in the configured target environment ("es2017")
    at failureErrorWithLog (/home/froyer/src/status-im/js-waku/examples/relay-angular-chat/node_modules/esbuild/lib/main.js:1557:15)
    at /home/froyer/src/status-im/js-waku/examples/relay-angular-chat/node_modules/esbuild/lib/main.js:1346:29
    at /home/froyer/src/status-im/js-waku/examples/relay-angular-chat/node_modules/esbuild/lib/main.js:637:9
    at handleIncomingPacket (/home/froyer/src/status-im/js-waku/examples/relay-angular-chat/node_modules/esbuild/lib/main.js:734:9)
    at Socket.readFromStdout (/home/froyer/src/status-im/js-waku/examples/relay-angular-chat/node_modules/esbuild/lib/main.js:604:7)
    at Socket.emit (node:events:390:28)
    at addChunk (node:internal/streams/readable:315:12)
    at readableAddChunk (node:internal/streams/readable:289:9)
    at Socket.Readable.push (node:internal/streams/readable:228:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:199:23)

D4nte · 2022-02-10T23:17:37Z

Resolves Angular example #320

We need docs.wakuconnect.dev to have the angular doc before we can close this issue #320.

D4nte

Great job!

I see that the tax is not straightforward and you have unearth some issues around types import, which is exactly what we wanted to do with this issue: ensure that js-waku can work with Angular out-of-the-box.

examples/relay-angular-chat/README.md

examples/relay-angular-chat/package.json

examples/relay-angular-chat/src/app/app.component.ts

examples/relay-angular-chat/tsconfig.json

jemboh · 2022-02-15T21:24:01Z

Resolves Angular example #320

We need docs.wakuconnect.dev to have the angular doc before we can close this issue #320.

PR raised

D4nte · 2022-02-16T00:12:41Z

Please add this folder to the examples ci to ensure we updated if we do a breaking change on js-waku API.

github-actions · 2022-02-16T03:53:41Z

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
build/esm/index.js	2.11 MB (0%)	43.2 s (0%)	1.5 s (-9.61% 🔽)	44.7 s

D4nte · 2022-02-16T03:59:07Z

I am still getting an error. I added the folder to the examples CI so you can check from the CI whether all deps are properly committed

js-waku/examples/relay-angular-chat  angular-js-example-for-
relay ✔                                             6h36m  
▶ yarn start
yarn run v1.22.11
$ ng serve
✔ Browser application bundle generation complete.

Initial Chunk Files                                           | Names         |  Raw Size
vendor.js                                                     | vendor        |   5.89 MB | 
polyfills.js                                                  | polyfills     | 355.68 kB | 
styles.css, styles.js                                         | styles        | 173.29 kB | 
runtime.js                                                    | runtime       |  13.12 kB | 
main.js                                                       | main          |  12.73 kB | 

                                                              | Initial Total |   6.43 MB

Lazy Chunk Files                                              | Names         |  Raw Size
node_modules_js-waku_lib_waku_message_symmetric_node_js.js    | node          |   2.82 kB | 
node_modules_js-waku_lib_waku_message_symmetric_browser_js.js | browser       |   2.71 kB | 

Build at: 2022-02-16T03:48:19.906Z - Hash: ab5c4c00640f7e2f - Time: 17273ms

Error: ../../node_modules/libp2p-interfaces/dist/src/pubsub/index.d.ts:328:26 - error TS7016: Could not find a declaration file for module 'bl'. '/home/froyer/src/status-im/js-waku/node_modules/bl/bl.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/bl` if it exists or add a new declaration (.d.ts) file containing `declare module 'bl';`

328 type BufferList = import('bl');
                             ~~~~


Error: ../../node_modules/libp2p-interfaces/dist/src/stream-muxer/types.d.ts:1:24 - error TS7016: Could not find a declaration file for module 'bl/BufferList'. '/home/froyer/src/status-im/js-waku/node_modules/bl/BufferList.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/bl` if it exists or add a new declaration (.d.ts) file containing `declare module 'bl/BufferList';`

1 import BufferList from 'bl/BufferList'
                         ~~~~~~~~~~~~~~~


Error: ../../node_modules/libp2p-interfaces/dist/src/transport/types.d.ts:1:24 - error TS7016: Could not find a declaration file for module 'bl/BufferList'. '/home/froyer/src/status-im/js-waku/node_modules/bl/BufferList.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/bl` if it exists or add a new declaration (.d.ts) file containing `declare module 'bl/BufferList';`

1 import BufferList from 'bl/BufferList'
                         ~~~~~~~~~~~~~~~




** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✖ Failed to compile.

D4nte · 2022-02-16T04:05:41Z

I am still getting an error. I added the folder to the examples CI so you can check from the CI whether all deps are properly committed

I fixed the error by running npm i --save-dev @types/bl at the root of the repo.

D4nte

Looks good! 2 fix to do before merging:

Check my questions re ngInit. I am not familiar with that but it's familar to React's useEffect then it happen every time the component is loaded which does not make it the best place to create the Waku node
It seems that we could use a type dep at js-waku level (bl). It's strange. do you get the same issue when using the published js-waku package instead of local files?
I added the folder to the example CI. It takes an eternity to run the test. It is using npm at the moment. I think we can switch it to yarn in a follow-up PR (or never if it does not impact the test) but we should try to keep CI execution short.

examples/relay-angular-chat/src/app/app.component.ts

examples/relay-angular-chat/README.md

jemboh · 2022-02-16T08:28:28Z

I fixed the error by running npm i --save-dev @types/bl at the root of the repo.

Correct. I think I know why I missed this. I never deleted the node_modules from the root but I removed that dependency from the root package.json. It is in the docs for a fresh angular project though.

Added it back now.

npm+angular+js-waku don't seem to play nicely together so we're using yarn instead. This means we need to check it in to the repo.

D4nte · 2022-02-16T08:31:20Z

I fixed the error by running npm i --save-dev @types/bl at the root of the repo.

Correct. I think I know why I missed this. I never deleted the node_modules from the root but I removed that dependency from the root package.json. It is in the docs for a fresh angular project though.

Added it back now.

I am still surprised we need to add it at the root. What is the behaviour when using js-waku from npmjs.com? Does installing the types in the angular project work?

jemboh · 2022-02-16T08:49:22Z

I am still surprised we need to add it at the root. What is the behaviour when using js-waku from npmjs.com? Does installing the types in the angular project work?

I think because we're not using js-waku from npmjs but from "file:../../build/esm", that's where it needs to be referenced from.

When it's used from npmjs then it can be installed directly to the angular example folder.

The "file:../../build/esm" was added for ci thought right?

D4nte · 2022-02-16T09:30:07Z

I am still surprised we need to add it at the root. What is the behaviour when using js-waku from npmjs.com? Does installing the types in the angular project work?

I think because we're not using js-waku from npmjs but from "file:../../build/esm", that's where it needs to be referenced from.

When it's used from npmjs then it can be installed directly to the angular example folder.

The "file:../../build/esm" was added for ci thought right?

file: strategy is used because:

the library was not published when I built the first example
Enables easy testing/try out of changes in example
Forces us to keep examples and related doc up to date.

However, this is the 3rd time this strategy creates a problem. Ultimately, it may be better to simply use the npmjs.com package as it'll reproduce exactly how users are using the lib.

Also, regarding the reasons above in favour of file::

Not valid anymore
Nothing stop a dev to change to file: locally for trying out a new change
Dependabot will ensure we don't forget to update the examples

So, moving forward, I propose you use the npmjs.com package in the angular example.
We can them move all examples to use published js-waku.

Finally, don't forget to add a dependabot entry for the new example.

D4nte · 2022-02-16T22:59:50Z

Remaining (just for the sake of clarity):

use js-waku from npmjs.com instead of file:
Fix examples-ci

jemboh · 2022-02-18T10:36:35Z

Closing in favour of #549

jemboh added 13 commits February 7, 2022 15:22

initial commit of basic angular app

de2b687

adding angular cache folder to gitignore

60725d8

added messages component to display messages

57ccd2d

Added libraries needed to run js-waku and js-waku itself

37abcc8

Configured CommonJS dependencies to stop warnings

15ae29b

Added paths to crypto and stream libraries so TS can find them

4100785

Adding polyfills for 'process' and 'global'

2c946f9

This is a 'known' bug in a few libraries that use Angular 12. It was causing the app to not start properly but with some pretty unhelpful messaging.

pointing to local build on js-waku rather than packaged

288a27e

buffer polyfills

fccae93

added protons type module

e54220c

[wip] removed message service for now

a860ff3

jemboh requested a review from D4nte February 10, 2022 21:03

D4nte reviewed Feb 10, 2022

View reviewed changes

jemboh changed the title ~~Angular 12 example for Relay~~ Angular 13 example for Relay Feb 13, 2022

jemboh added 9 commits February 15, 2022 16:36

adding protons and removing npm

86b1bf2

message html formatting

f1def36

implemented message interface

7e0f29f

prepended waku namespace for npmjs

9b62c9e

updated ts target due to BigInt usage

95804ff

Told typescript that waku object really is a type of Waku!

8d79ad0

updated readme

4ed9724

updated wakuconnect url

9d5e572

delete relay observer on component destruction

35306e8

jemboh requested a review from D4nte February 15, 2022 21:26

Add relay-angular-chat to example CI

ecadaeb

D4nte reviewed Feb 16, 2022

View reviewed changes

jemboh added 3 commits February 16, 2022 08:31

added bl types to the root for angular example

842308b

removed gitignore entry for yarn lock files

fa93ffb

npm+angular+js-waku don't seem to play nicely together so we're using yarn instead. This means we need to check it in to the repo.

adding yarn lockfile

9a4549f

shortened yarn command

684fdd3

destroy component on page reload

024fa1a

jemboh closed this Feb 18, 2022

fryorcraken deleted the angular-js-example-for-relay branch September 26, 2022 00:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Angular 13 example for Relay #515

Angular 13 example for Relay #515

jemboh commented Feb 10, 2022 •

edited

Loading

D4nte commented Feb 10, 2022

D4nte commented Feb 10, 2022

D4nte left a comment

jemboh commented Feb 15, 2022

D4nte commented Feb 16, 2022

github-actions bot commented Feb 16, 2022

D4nte commented Feb 16, 2022

D4nte commented Feb 16, 2022

D4nte left a comment

jemboh commented Feb 16, 2022

D4nte commented Feb 16, 2022

jemboh commented Feb 16, 2022

D4nte commented Feb 16, 2022

D4nte commented Feb 16, 2022

jemboh commented Feb 18, 2022

Angular 13 example for Relay #515

Angular 13 example for Relay #515

Conversation

jemboh commented Feb 10, 2022 • edited Loading

Problem

Solution

Notes

D4nte commented Feb 10, 2022

D4nte commented Feb 10, 2022

D4nte left a comment

Choose a reason for hiding this comment

jemboh commented Feb 15, 2022

D4nte commented Feb 16, 2022

github-actions bot commented Feb 16, 2022

size-limit report 📦

D4nte commented Feb 16, 2022

D4nte commented Feb 16, 2022

D4nte left a comment

Choose a reason for hiding this comment

jemboh commented Feb 16, 2022

D4nte commented Feb 16, 2022

jemboh commented Feb 16, 2022

D4nte commented Feb 16, 2022

D4nte commented Feb 16, 2022

jemboh commented Feb 18, 2022

jemboh commented Feb 10, 2022 •

edited

Loading