helia-examples icon indicating copy to clipboard operation
helia-examples copied to clipboard

feat: new example, helia-angular

Open SgtPooki opened this issue 1 year ago • 9 comments

To help some Angular devs who want to use Helia, it would be great if we had an example showing a basic Helia example using Angular framework.

To create: re-use an existing example and just modify to use Angular instead.

SgtPooki avatar Aug 08 '24 14:08 SgtPooki

@SgtPooki I will work on this tonight :)

paschal533 avatar Aug 08 '24 15:08 paschal533

Hello there! I would like to work on this issue if its still open? Kindly update. 😊

Nkovaturient avatar Jan 23 '25 16:01 Nkovaturient

Hello there! I would like to work on this issue if its still open? Kindly update. 😊

Yeah, sure. Let's work on it together. I have created a PR (https://github.com/ipfs-examples/helia-examples/pull/309) but some test keeps failing when you run ng test. Thank you for your help. 😊

paschal533 avatar Jan 23 '25 16:01 paschal533

Hello there! I would like to work on this issue if its still open? Kindly update. 😊

Yeah, sure. Let's work on it together. I have created a PR (#309) but some test keeps failing when you run ng test. Thank you for your help. 😊

Integrating Helia-angular with SSR by intuitively wrapping ngOnInit and isPlatformBrowser was indeed a bold move, however the missing outerHTML setting test seems to be a obstacle.

Thanks for the response, I shall get back to you with my update.

Nkovaturient avatar Jan 23 '25 20:01 Nkovaturient

Hello there! I would like to work on this issue if its still open? Kindly update. 😊

Yeah, sure. Let's work on it together. I have created a PR (#309) but some test keeps failing when you run ng test. Thank you for your help. 😊

Integrating Helia-angular with SSR by intuitively wrapping ngOnInit and isPlatformBrowser was indeed a bold move, however the missing outerHTML setting test seems to be a obstacle.

Thanks for the response, I shall get back to you with my update.

Thanks :) I will be waiting for your update.

paschal533 avatar Jan 23 '25 21:01 paschal533

Hey @paschal533 , As concluded, Its working perfectly fine in angular-csr. However, facing this err constantly with angular-ssr enabled--

Error: Cannot find module '../../package.json'
Require stack:
- F:\Helia\helia-examples\examples\helia-angular\.angular\prerender-root\d591a9ff-9627-423e-b15b-8419393814b8\main.server.mjs
    at Module._resolveFilename (node:internal/modules/cjs/loader:1144:15)
    at Module._load (node:internal/modules/cjs/loader:985:27)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at require (node:internal/modules/helpers:176:18)
    at file:///F:/Helia/helia-examples/examples/helia-angular/.angular/prerender-root/d591a9ff-9627-423e-b15b-8419393814b8/main.server.mjs:219:8007
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:431:15)
    at async extractRoutes (F:\Helia\helia-examples\examples\helia-angular\node_modules\@angular\build\src\utils\server-rendering\routes-extractor-worker.js:23:83)
    at async F:\Helia\helia-examples\node_modules\piscina\dist\worker.js:144:26


npm ERR! Lifecycle script `build` failed with error: 
npm ERR! Error: command failed
npm ERR!   in workspace: [email protected]
npm ERR!   at location: F:\Helia\helia-examples\examples\helia-angular


Troubleshoot/debugging fixes taken by me so far--

  1. Webpack plugin---- since Angular bundles modules, and the relative path structure is lost, using a Webpack Plugin to Inline the package.json
  2. Include package.json in SSR Build--- modifying angular.json to include helia as commonjs dependency--``` "build": { "options": { "allowedCommonJsDependencies": [ "helia" ] } }

Any guidance?

Nkovaturient avatar Jan 24 '25 16:01 Nkovaturient

FYI Helia should be fully ESM afaik...

SgtPooki avatar Jan 24 '25 18:01 SgtPooki

@SgtPooki @paschal533 kindly look into it,

https://github.com/ipfs-examples/helia-examples/pull/425

I have arduously fixed, modified and debugged err and setup helia-angular. 🙂

Nkovaturient avatar Feb 01 '25 17:02 Nkovaturient

@SgtPooki @paschal533 kindly look into it,

#425

I have arduously fixed, modified and debugged err and setup helia-angular. 🙂

Well done 🎉, Neha. I will review it in a bit.

paschal533 avatar Feb 01 '25 19:02 paschal533