Getting DAppKitUI not configured Error

[AthiraVGopi]

Cloned angular sample project directly and used, while clicking connect wallet , getting the errors - 1) main.ts:4 ERROR TypeError: http_1.Agent is not a constructor at new SimpleNet (simple-net.js:24:24) at he (index.js:1:12541) at new Q (index.js:1:12697) at Object.configure (index.js:23:97112) at AppComponent.ngOnInit (app.component.ts:33:19) at callHookInternal (core.mjs:4024:14) at callHook (core.mjs:4051:13) at callHooks (core.mjs:4006:17) at executeInitAndCheckHooks (core.mjs:3956:9) at refreshView (core.mjs:13513:21) handleError @ core.mjs:10614 (anonymous) @ core.mjs:28881 invoke @ zone.js:368 run @ zone.js:129 runOutsideAngular @ core.mjs:10979 (anonymous) @ core.mjs:28881 tick @ core.mjs:28745 _loadComponent @ core.mjs:28773 bootstrap @ core.mjs:28710 (anonymous) @ core.mjs:28227 invoke @ zone.js:368 onInvoke @ core.mjs:11083 invoke @ zone.js:367 run @ zone.js:129 (anonymous) @ zone.js:1257 invokeTask @ zone.js:402 (anonymous) @ core.mjs:10757 onInvokeTask @ core.mjs:10757 invokeTask @ zone.js:401 onInvokeTask @ core.mjs:11070 invokeTask @ zone.js:401 runTask @ zone.js:173 drainMicroTaskQueue @ zone.js:581 Zone - Promise.then (async) onScheduleTask @ core.mjs:10751 scheduleTask @ zone.js:382 onScheduleTask @ zone.js:279 scheduleTask @ zone.js:382 scheduleTask @ zone.js:216 scheduleMicroTask @ zone.js:236 scheduleResolveOrReject @ zone.js:1247 then @ zone.js:1442 (anonymous) @ core.mjs:28222 _callAndReportToErrorHandler @ core.mjs:28488 (anonymous) @ core.mjs:28219 invoke @ zone.js:368 onInvoke @ core.mjs:11083 invoke @ zone.js:367 run @ zone.js:129 run @ core.mjs:10934 internalCreateApplication @ core.mjs:28196 bootstrapApplication @ platform-browser.mjs:1020 14913 @ main.ts:4 webpack_require @ bootstrap:19 webpack_exec @ ignored|D:\Project\QlikTag\sample-angular-app\node_modules\thor-devkit\node_modules\bn.js\lib|buffer:1 (anonymous) @ ignored|D:\Project\QlikTag\sample-angular-app\node_modules\thor-devkit\node_modules\bn.js\lib|buffer:1 __webpack_require__.O @ chunk loaded:23 (anonymous) @ ignored|D:\Project\QlikTag\sample-angular-app\node_modules\thor-devkit\node_modules\bn.js\lib|buffer:1 webpackJsonpCallback @ jsonp chunk loading:71 (anonymous) @ main.js:1

2) core.mjs:10614 ERROR Error: DAppKitUI not configured at Object.get (index.js:23:97589) at get wallet (index.js:23:97350) at Q.handleOpen (index.js:247:132) at EventPart.handleEvent (lit-html.js:1327:35) at task.callback (zone.js:1622:49) at _ZoneDelegate.invokeTask (zone.js:402:31) at core.mjs:10757:55 at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:10757:36) at _ZoneDelegate.invokeTask (zone.js:401:60) at Object.onInvokeTask (core.mjs:11070:33)

[darrenvechain]

@AthiraVGopi have you configured polyfills in your application? You can see an example here:

https://github.com/vechain/vechain-dapp-kit/blob/main/examples/sample-angular-app/angular.json#L26

[AthiraVGopi]

Hi @darrenvechain, polyfills are there, I am trying to run the sample-angular-app without any modifications. so example application throws same error while running

[darrenvechain]

@AthiraVGopi Angular seems to work fine for me, and we also run it as part of the e2e tests in the CI. What is your node version?

https://github.com/vechain/vechain-dapp-kit/assets/107671032/143755ec-2079-4bcb-ad70-58da192993ff

[darrenvechain]

We also have https://vechain.github.io/vechain-dapp-kit/angular/, which is based off the latest commit to main

[AthiraVGopi]

@darrenvechain

Angular CLI: 16.2.14
Node: 16.14.2 Package Manager: npm 10.5.2 OS: win32 x64

these are the versions used

[darrenvechain]

Is it possible to use v18?

We have this in the readme:

### Prerequisites

-   Node.js >= 18.17
-   Yarn >= 1.22.10

[AthiraVGopi]

@darrenvechain Angular CLI: 16.2.14
Node: 18.20.0 Package Manager: npm 10.5.0 OS: win32 x64

Tried with this version getting same errors .

const walletConnectOptions = {
    projectId: 'a0b855ceaf109dbc8426479a4c3d38d8',
    metadata: {
        name: 'Sample VeChain dApp',
        description: 'A sample VeChain dApp',
        url: 'demo.t.qlkt.io',
        icons: [`demo.t.qlkt.io/images/logo/my-dapp.png`],
    },
};

const vechainDAppKitOptions = {
    nodeUrl: 'https://testnet.vechain.org/',
    genesis: 'test',
    walletConnectOptions:walletConnectOptions,
    usePersistence: true,
};

console.log(typeof DAppKitUI.configure);
console.log(DAppKitUI)
DAppKitUI.configure(vechainDAppKitOptions);

getting error as configure not a function when i tried to console

[darrenvechain]

Not sure whats going on there @AthiraVGopi , I've got different results on my side:

[AthiraVGopi]

Hi @darrenvechain when i click on connect wallet, showing other than veworld, wallect connect and sync is showing, what i need to do for removing those options, for me only want veworld wallet option.

[AthiraVGopi]

Hi @darrenvechain ,

I am able to run and connect the vewallet from sample app using localhost. When I tried with a domain and selecting vewallet it is redirecting to "https://www.veworld.com/discover/browser/ul/http%3A%2F%2Fdev.l.qlt.io%2F%3For%3DVTJGc2RHVmtYMS83TmNVWlRRdTFZb1puZEdIajk0eGl4em5QRktLV1pFT1Z2eXpnaWJ6VlpPYUpvamVNbzhwMg"

not able to find the issue using domain in the project. the wallet list popup is coming but when selecting it will not working. please explain the configuration need to add for routing to this app using domain.