How can I use web3.js with Angular 2

Question

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?

Answer 1

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()

Answer 2

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