feat: add Helia Angular example

[paschal533]

I added how to implement helia in an Angular project

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
verified-fetch	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 10, 2024 2:22pm

[achingbrain]

@paschal533 thanks so much for opening this - do you have some time to address @SgtPooki's review comments?

[paschal533]

@paschal533 thanks so much for opening this - do you have some time to address @SgtPooki's review comments?

I totally forgot 🤦. Let me work on it right away. Thank you so much.

[paschal533]

@SgtPooki Thank you for taking the time to review this pull request and providing such insightful suggestions. The necessary changes have been made accordingly.

[SgtPooki]

I tested this locally again and tried making some improvements, but no matter what I do Chrome will crash the page for some reason. I am thinking it's the WebTransport errors because it doesn't happen in FF

[paschal533]

I tested this locally again and tried making some improvements, but no matter what I do Chrome will crash the page for some reason. I am thinking it's the WebTransport errors because it doesn't happen in FF

Hi @SgtPooki, Do you have any idea how we can fix the Browser crashing issue? I tried everything I could but Chrome kept crashing.

[SgtPooki]

I tested this locally again and tried making some improvements, but no matter what I do Chrome will crash the page for some reason. I am thinking it's the WebTransport errors because it doesn't happen in FF

Hi @SgtPooki, Do you have any idea how we can fix the Browser crashing issue? I tried everything I could but Chrome kept crashing.

I think we need to see if disabling webtransport fixes the issue in chrome? Angular seems to be doing something odd with network errors, instead of handling them gracefully, and only chromium based browsers throws those errors

[paschal533]

I tested this locally again and tried making some improvements, but no matter what I do Chrome will crash the page for some reason. I am thinking it's the WebTransport errors because it doesn't happen in FF

Hi @SgtPooki, Do you have any idea how we can fix the Browser crashing issue? I tried everything I could but Chrome kept crashing.

I think we need to see if disabling webtransport fixes the issue in chrome? Angular seems to be doing something odd with network errors, instead of handling them gracefully, and only chromium based browsers throws those errors

Hi @SgtPooki,

Thanks for the suggestion! I'll test disabling WebTransport to see if it resolves the issue in Chrome. I’ll also look into how Angular is handling network errors and try to identify why Chromium-based browsers are throwing these exceptions.

If you have any specific steps or resources for debugging this further, I'd appreciate the pointers. I'll update you once I have some results from the testing.

Thanks again for the help!

[SgtPooki]

If you have any specific steps or resources for debugging this further, I'd appreciate the pointers. I'll update you once I have some results from the testing.

I really wish I did.. I tried stepping through and tracing and couldn't get the app to be accessible in the browser at any point after it crashes. The only other thing I tried doing was building a static front-end so the ng build wasn't playing a part at all, but I just got the same issue.

I think if we can pull out any of the server side stuff here and just use Angular as a front-end library (can Angular even do that? How do you build a fully encapsulated static front-end site with Angular?), it might give us some more insight.

I also tried completely removing the Helia instance from all Angular references to see if that helped, and it did not.

[paschal533]

If you have any specific steps or resources for debugging this further, I'd appreciate the pointers. I'll update you once I have some results from the testing.

I really wish I did.. I tried stepping through and tracing and couldn't get the app to be accessible in the browser at any point after it crashes. The only other thing I tried doing was building a static front-end so the ng build wasn't playing a part at all, but I just got the same issue.

I think if we can pull out any of the server side stuff here and just use Angular as a front-end library (can Angular even do that? How do you build a fully encapsulated static front-end site with Angular?), it might give us some more insight.

I also tried completely removing the Helia instance from all Angular references to see if that helped, and it did not.

Hi @SgtPooki ,

Thanks for sharing your experience! It’s helpful to know you tried building a static front-end and removing Helia references, but the issue persisted.

Regarding your question, yes, Angular can be used as a fully encapsulated static front-end framework. The ng build command produces static files (HTML, CSS, JS) that can be served by any HTTP server. To isolate the problem further, I could try creating a minimal Angular project, removing all server-side interactions, and integrating only Helia with basic functionality. This might help us pinpoint whether it’s Angular itself, the Helia integration, or a Chromium-specific issue.

Here’s what I plan to test next:

1. Isolated Helia Integration: Build a minimal Angular app with only the Helia instance and no server-side dependencies.
2. Static Build Deployment: Deploy the static files (ng build) on a simple static server (e.g., serve, http-server) to see if the build process is contributing to the crash.
3. WebTransport Isolation: Disable WebTransport in the Helia configuration (if possible) or force an alternate transport method.

I’ll let you know what I find. If there’s anything specific you’d like me to test, please let me know!

[paschal533]

Hi @SgtPooki ,

I managed to resolve the browser crashing issue by isolating Helia in a minimal Angular app. Here’s what I did:

1. Created a fresh Angular app with no server-side dependencies or additional libraries.
2. Integrated only Helia with basic initialization in the app.component.ts file.
3. Ran the app using ng serve and observed that it worked fine without any crashes.

It seems the issue may be related to how Helia interacts with more complex Angular projects or specific configurations.

Let me know your thoughts!

[SgtPooki]

I feel like an example showing how to get it working with server side components would be good but if we have a simple example with just front-end angular working that's a great starting point. Maybe we can change the name to frontend only?

...or, since we confirmed its something with the server side parts of angular, can we encapsulate the Helia component enough to tell the angular build system to only do the helia stuff on the frontend? In react and nextjs this would just be a simple useEffect() IIRC

[paschal533]

I feel like an example showing how to get it working with server side components would be good but if we have a simple example with just front-end angular working that's a great starting point. Maybe we can change the name to frontend only?

...or, since we confirmed its something with the server side parts of angular, can we encapsulate the Helia component enough to tell the angular build system to only do the helia stuff on the frontend? In react and nextjs this would just be a simple useEffect() IIRC

I agree, having an example that shows how to get it working with server side components would be helpful.

Encapsulating Helia to run only on the front-end within Angular is a great idea. While Angular doesn’t have a useEffect() equivalent, we can achieve something similar by:

1. Checking the platform at runtime to ensure Helia is only initialized in the browser (e.g., using isPlatformBrowser from Angular's @angular/common).
2. Wrapping Helia initialization inside Angular's ngOnInit() lifecycle hook, which runs only after the component is loaded in the browser.

I'll create an updated version of the example to demonstrate this approach and test it in a more complex Angular setup. I'll also explore encapsulating Helia in a service or module to make it reusable and easier to integrate with server-side rendering or Angular Universal.

[paschal533]

Hi @SgtPooki,

I wanted to let you know that everything is working now! 🎉 It took me a few days of trial and error to figure it out, but I finally got it sorted. I learned a lot along the way, and honestly, I enjoyed the journey—it was a great challenge!

I’ve pushed the code for review. Let me know if there’s anything else I can improve or adjust.

Thanks for all your guidance and support throughout this process! 🙌

[paschal533]

@paschal533 I've confirmed this is working in chrome now (FF still works). Great work!!

There are still a few unresolved issues from previous comments:

• .editorconfig not idiomatic in these examples (please delete it from the git repo git rm --cached .editorconfig)
• styling of the page should more closely match styling of other examples

Hi @SgtPooki Thanks for confirming it works in Chrome and FF! I've removed the .editorconfig file from the repo as requested. Regarding the styling, I based it on the Next.js example. Could you share specific points or details about how it should align better with the other examples? I'm happy to adjust it!

[SgtPooki]

@paschal533 I see that the nextjs example is using a pretty standard nextjs app template. I am good with leaving this and will chat about this in Helia WG today

[paschal533]

@paschal533 I see that the nextjs example is using a pretty standard nextjs app template. I am good with leaving this and will chat about this in Helia WG today

Alright, thanks @SgtPooki. Please, can you help me with the link to Helia WG today. I can't seem to find it on my calendar. :)

[SgtPooki]

Alright, thanks @SgtPooki. Please, can you help me with the link to Helia WG today. I can't seem to find it on my calendar. :)

you can find all Helia WG meetings on the IPFS calendar here: https://lu.ma/ipfs

Today's meeting is at https://lu.ma/8yw69b08

[paschal533]

Alright, thanks @SgtPooki. Please, can you help me with the link to Helia WG today. I can't seem to find it on my calendar. :)

you can find all Helia WG meetings on the IPFS calendar here: https://lu.ma/ipfs

Today's meeting is at https://lu.ma/8yw69b08

Thank you.

[paschal533]

Hi @SgtPooki, I have updated the ci.yml file.

[SgtPooki]

@paschal533 FYI that npm run test is showing some errors in the console and seems to hang (as in CI):

npm run test

> [email protected] test
> ng test

✔ Browser application bundle generation complete.
14 01 2025 10:57:26.021:WARN [karma]: No captured browser, open http://localhost:9876/
14 01 2025 10:57:26.033:INFO [karma-server]: Karma v6.4.4 server started at http://localhost:9876/
14 01 2025 10:57:26.034:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
14 01 2025 10:57:26.036:INFO [launcher]: Starting browser Chrome
14 01 2025 10:57:32.359:INFO [Chrome 131.0.0.0 (Mac OS 10.15.7)]: Connected on socket fSTn2GHhdwFmhju8AAAB with id 28916245
Chrome 131.0.0.0 (Mac OS 10.15.7): Executed 3 of 3 SUCCESS (0.061 secs / 0.051 secs)
ERROR: 'Error initializing Helia:', MissingServiceError: outerHTML not set
MissingServiceError: outerHTML not set
    at Object.get (http://localhost:9876/_karma_webpack_/webpack:/node_modules/libp2p/dist/src/components.js:72:27)
    at stringify (http://localhost:9876/context.js:63:22)
    at stringify (http://localhost:9876/context.js:90:36)
    at ContextKarma.stringify (http://localhost:9876/context.js:90:36)
    at ContextKarma.log (http://localhost:9876/context.js:154:24)
    at console.log (http://localhost:9876/context.js:263:16)
    at http://localhost:9876/_karma_webpack_/webpack:/src/app/helia.component.ts:25:17
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular-devkit/build-angular/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:3:1)
    at _next (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular-devkit/build-angular/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:17:1)
Chrome 131.0.0.0 (Mac OS 10.15.7): Executed 3 of 3 SUCCESS (0.061 secs / 0.051 secs)
ERROR: 'Error initializing Helia:', MissingServiceError: outerHTML not set
MissingServiceError: outerHTML not set
    at Object.get (http://localhost:9876/_karma_webpack_/webpack:/node_modules/libp2p/dist/src/components.js:72:27)
    at stringify (http://localhost:9876/context.js:63:22)
    at stringify (http://localhost:9876/context.js:90:36)
    at ContextKarma.stringify (http://localhost:9876/context.js:90:36)
    at ContextKarma.log (http://localhost:9876/context.js:154:24)
    at console.log (http://localhost:9876/context.js:263:16)
    at http://localhost:9876/_karma_webpack_/webpack:/src/app/helia.component.ts:25:17
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular-devkit/build-angular/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:3:1)
    at _next (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular-devkit/build-angular/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:17:1)

[paschal533]

Hi @SgtPooki ,

I wanted to give you an update on my progress with the Helia component tests. I’ve successfully added a test to display the peer ID after Helia initialization. However, I’m still currently encountering a MissingServiceError: outerHTML not set error.

I spent the whole of yesterday troubleshooting it, but unfortunately, I haven’t made any progress yet. I’m still investigating the root cause and will update you as soon as I identify a solution.

Thanks for your patience

[SgtPooki]

awesome thanks for the update!