3

I'm trying to import Web3 to my component files which is written in Typescript but I couldn't make it.

I used npm install --save web3-typescript-typings and added

"include": [
    "../node_modules/web3-typescript-typings/index.d.ts"
  ]

to tsconfig.json. However I still get errors from browser's console:

Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/node_modules/web3
    Error: XHR error (404 Not Found) loading http://localhost:3000/node_modules/web3
        at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:1056:39)
        at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:424:31)
        at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:191:47)
        at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:486:38)
    Error loading http://localhost:3000/node_modules/web3 as "@web3" from http://localhost:3000/app/exchange.component.js
        at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:1056:39)
        at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:424:31)
        at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:191:47)
        at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:486:38)
    Error loading http://localhost:3000/node_modules/web3 as "@web3" from http://localhost:3000/app/exchange.component.js
(anonymous) @ (index):18
ZoneDelegate.invoke @ zone.js:391
Zone.run @ zone.js:141
(anonymous) @ zone.js:818
ZoneDelegate.invokeTask @ zone.js:424
Zone.runTask @ zone.js:191
drainMicroTaskQueue @ zone.js:584
ZoneTask.invoke @ zone.js:490

Can anyone shed me some lights?

2

You're actually almost there. Be sure to import the module in your component, like so: import Web3 from 'web3';

Then, connect to the network: web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));

Then use it like so:

this.web3.isConnected()

0

For web3 1.0.0 & Angular 5, importing Web3 to a component works without installing/including web3-typescript-typings

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.