how to hook up web3 injected by metamask in angular 2

Question

As described in metamask github, one can bootstrap metamask like this:

window.addEventListener('load', function() {

  // Checking if Web3 has been injected by the browser (Mist/MetaMask) if (typeof web3 !== 'undefined') {
    // Use Mist/MetaMask's provider
    window.web3 = new Web3(web3.currentProvider);   } else {
    console.log('No web3? You should consider trying MetaMask!')
    // fallback - use your fallback strategy (local node / hosted node + in-dapp id mgmt / fail)
    window.web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));   }

  // Now you can start your app & access web3 freely:   startApp()

})

How do I implement in angular 2 typescript, and where do I hookup this metamask web3 inject so that it will popup the metamask wallet whenever I trigger web3.eth.sendTransaction()

Answer 1

The simpliest way to do this is to edit main.ts

and replace

platformBrowserDynamic().bootstrapModule(AppModule);

by

window.addEventListener('load', function() {

  // Checking if Web3 has been injected by the browser (Mist/MetaMask)
  if (typeof window.web3 !== 'undefined') {
    // Use Mist/MetaMask's provider
    window.web3 = new Web3(window.web3.currentProvider);
  } else {
    console.log('No web3? You should consider trying MetaMask!')
    // fallback - use your fallback strategy (local node / hosted node + in-dapp id mgmt / fail)
    window.web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
  }

  platformBrowserDynamic().bootstrapModule(AppModule);

});

then create a service and do

declare global {
  interface Window { web3: any; }
}

window.web3 = window.web3 || {};

@Injectable()
export class Web3Service {

  web3: any;

  constructor() {
    this.web3 = window.web3;
  }

  getWeb3() {
    return this.web3;
  }

Answer 2

Oraclize's StackExchange Bounty ÐApp might be good to use as an example. It's deployed, but doesn't seem to get much use. It uses an Angular2 front-end. (I'm sure there are lots of others, but this is the only one I've played with.)

Specifically, take a look at how the web3.service.ts Typescript file handles MetaMask connections in its @Injectable (line 161):

connectToNode(): void { // Don't unlock until you send a transaction
    if (typeof window['web3'] !== 'undefined' && (!localStorage['nodeIP'] || this.nodeIP === 'MetaMask')) {
        localStorage['nodeIP'] = this.nodeIP;
        console.log('Using injected web3');
        this.web3 = new this.Web3(window['web3'].currentProvider);
        this.nodeIP = 'MetaMask';
        this.nodeConnected = true;
        this.unlockedAccount = 'MetaMask';
        this.update.emit(null);
    } else {
        localStorage['nodeIP'] = this.nodeIP;
        console.log('Using HTTP node');
        this.unlockedAccount = undefined;
        this.web3 = new this.Web3(new this.Web3.providers.HttpProvider(this.nodeIP));
        this.handleConnection(this.web3.isConnected());
    }
}

You'll have to look at how their whole project is set up to get an idea of services, etc., but it's a good place to start.