Feat: Example Helia Angular

[Nkovaturient]

Issue: #308 #309

Description:
Properly configured, setup and resolved Helia to work seamlessly within the Angular application while maintaining good development practices and build optimization.

Uses isPlatformBrowser() to check if code is running in browser environment
Gracefully handles SSR by preventing Helia initialization on server
Disables WebTransport to avoid Chrome crashes
BehaviorSubject: Stores and emits the current Helia initialization status-rxjs utilities

Fixes and Updates
Handles initialization states and errors properly
The key changes address:

• Server-side rendering compatibility
• Chrome crashing issues
• Module resolution errors
• Type safety
• Error handling

1)ERROR NoValidAddressesError: no valid addresses were provided for transports [@libp2p/websockets]
fix: configure the WebSocket transport with proper addresses.
1.Listen for incoming WebSocket connections
2. Connect to bootstrap nodes for peer discovery
3.Properly encrypt connections
4.Handle multiple streams

2)Error committing text: Error: UnixFS failed to initialize at _HeliaService.<anonymous> (helia.service.ts:85:13) at Generator.next (<anonymous>)
fix: Properly wait for Helia initialization before attempting operations
Add better error handling throughout the application
Show initialization status and errors to the user

3)Type '() => StreamMuxerFactory' is not assignable to type 'StreamMuxerFactory'.
fix: Adding type annotation : any to the underscore parameter
Double-invoking yamux with ()() to get the actual muxer instance
This adds as any to force the type system to accept the yamux configuration. While not ideal, it should work around the type mismatch between different versions of the libp2p interfaces.

4)Error fetching committed text: ReferenceError: Buffer is not defined at _CommitTextService.
fix: Since Buffer isn't available in browsers, used Uint8Array instead

Conclusion:

[paschal533]

Hi @Nkovaturient,

Great work! Everything functions perfectly, and the implementation looks solid. However, I have a few suggestions to enhance the PR further:

1. Dependencies: Please install @angular/platform-server and @angular/ssr. For some reason, they are missing from the package.json file.

2. Readme Update: Could you update the README.md to match the format used in the Helia-Angular-Readme?

3. CI Workflow: In the .github/workflows/ci.yml file, please add helia-angular under the projects section, as shown in this ci.yml example.

4. Favicon: It would be great to update the favicon to Helia's logo. You can find it here: Helia Favicon.

The components look good to me, but @SgtPooki will provide additional feedback on the component structure and styling.

Overall, you've done an excellent job here. Keep up the great work 👏

[Nkovaturient]

Thanks a lot for reviewing and suggesting required changes clearly @paschal533 ,
I have modified as desired.

[SgtPooki]

FYI it looks like the test-angular CI job is hanging.

[Nkovaturient]

FYI it looks like the test-angular CI job is hanging.

@SgtPooki @paschal533 Can you guide me on how to address this. I am not quite familiar with CI config as of now.
I examined it though.

• problem: Chrome is failing to start because it's missing an X server or the $DISPLAY environment variable. This is a common issue in headless environments like CI runners.

• solution: Do I have to install and config Xvfb or Headless Chrome (without Xvfb) since im on windows?

[paschal533]

FYI it looks like the test-angular CI job is hanging.

@SgtPooki @paschal533 Can you guide me on how to address this. I am not quite familiar with CI config as of now. I examined it though.

• problem: Chrome is failing to start because it's missing an X server or the $DISPLAY environment variable. This is a common issue in headless environments like CI runners.
• solution: Do I have to install and config Xvfb or Headless Chrome (without Xvfb) since im on windows?

Hi @Nkovaturient, I see you're having a couple of issues with this PR. Let me address both problems:

1. Lint Errors

The build is failing primarily because of ESLint errors. Looking at the error log, there are several common issues:

• Extra semicolons
• Unexpected trailing commas
• Import order problems
• Console statements (which might be disallowed by your project's ESLint rules)
• Issues with async functions and promises

These are relatively straightforward to fix. You can either:

• Run npm run lint -- --fix locally which will automatically fix many of these issues
• Manually address them in the files mentioned (mainly in src/main.ts and src/server.ts)

2. Chrome/X Server Issue

Regarding the Chrome issue with missing X server:

Since you're developing on Windows but the CI runs in a Linux environment, you're encountering a headless browser configuration issue. Your Angular testing setup is trying to use Chrome but can't find the necessary display server in the CI environment.

To fix this in your example project, you'll need to:

1. Check how tests are configured in your project. Look for test configuration files like angular.json or any custom test setup files.

2. Modify the test configuration to use proper headless mode with the necessary flags. You don't need to install anything on your Windows machine.

3. For the CI environment, you might need to add configuration in the GitHub workflow file (usually in .github/workflows/) to either:

   • Use --no-watch --no-progress --browsers=ChromeHeadlessCI flags when running tests
   • Or configure the CI to install and use Xvfb as a virtual display server

If you're not familiar with how testing is set up in the other examples in the repo, I'd recommend looking at similar examples to see how they handle browser testing in CI.

Try fixing the lint errors first as they're more straightforward, then we can tackle the Chrome issue if it persists.

[Nkovaturient]

Alright @paschal533 thanks a lot,
I will do it. 🫡

[Nkovaturient]

Hey @paschal533, I have resolved lint errors as of now.

[paschal533]

Hey @paschal533, I have resolved lint errors as of now.

Awesome, well done 🎉

[Nkovaturient]

@paschal533 ig the chrome/X server issue is back to haunt, I will try to fix it as you advised above.🫡

[Nkovaturient]

hey @paschal533 , I have implemented the required changes for fixing Chrome/X server issue as advised by you:

1. Fixes: angular.json

• added a ci configuration to the test architect in angular.json.
  This configuration sets the browsers to ["ChromeHeadlessCI"], disables watch mode, and disables progress output.

"configurations": {
            "ci": {
              "browsers": ["ChromeHeadlessCI"],
              "watch": false,
              "progress": false
            }

2. Fixes: github/workflows/ci.yml

• added the -- --configuration ci flag to the npm run test command in the examples job. This tells Angular CLI to use the ci configuration we defined in angular.json when running tests in the CI environment.

3. Removed import type in commitTextService.ts and app.component.ts cuz it was causing No suitable injection token issue.

kindly review and guide further.

[paschal533]

Hi @Nkovaturient
Great job on implementing those changes! Adding the CI configuration in angular.json and updating the workflow file are exactly the right steps. The ChromeHeadlessCI configuration should help the tests run properly in the CI environment without needing an X server.

Also, good catch on removing those import types that were causing the injection token issue. Those subtle TypeScript nuances can be tricky to spot.

Let me review your PR to see if there's anything else that needs attention. In the meantime, have you run the tests locally to make sure everything's working as expected? If you're still seeing any issues, feel free to share the specific error messages, and we can troubleshoot further.

Nice work on addressing these problems systematically 👍

[Nkovaturient]

Hello there @paschal533 all thanks to your support and yes, I have run the tests locally and ensured the functionality setup correctly.

[Nkovaturient]

@paschal533 ig the type imports are causing "lint errors" as I checked the build err with github copilot?
How to address it? Also, the -- --configuration ci in ci.yml is causing unprecedented err in each example setup?

[Nkovaturient]

@paschal533 ig the type imports are causing "lint errors" as I checked the build err with github copilot? How to address it? Also, the -- --configuration ci in ci.yml is causing unprecedented err in each example setup?

@paschal533 kindly guide!

[paschal533]

@paschal533 ig the type imports are causing "lint errors" as I checked the build err with github copilot? How to address it? Also, the -- --configuration ci in ci.yml is causing unprecedented err in each example setup?

Hi @Nkovaturient , I see you've been experimenting with different CI configurations. Let's tackle these issues one by one:

1. For the type imports causing lint errors - you might need to add an exception in the ESLint config specifically for those files, or adjust how you're importing the types. Can you share the specific lint errors you're seeing?

2. Regarding the CI configuration issues - I notice you tried both -- --configurations ci and then simplified to just the basic test command. The simpler approach is often better. Does the basic npm run test command work locally with your changes?

3. For the CI workflow, make sure the test script in your package.json matches what's expected in other examples. Sometimes the flags need to be included in the script definition itself rather than passed as arguments.

Keep me posted on how it goes!

[Nkovaturient]

yes, i have kept the simpler test run without -- configurations ci flag and have tested either way npm run test locally, it displayed correctly