How to Connect MetaMask to Angular Web using Truffle & Ganache

I assume if you are here, you have already set up your local environment with Truffle and Ganache and have the MetaMask extension installed on your browser. Once you are done with it, you can confirm if you can see the below two screens on your desktop.

Let’s first connect your Ganache to MetaMask wallet by following the below steps:

1. Click Network select the option and choose Custom RPC

2. You will be asked for the below details:

   • Network Name

     • This is your Network and name it as anything relevant to your project.

   • New RPC URL

     • This can be obtained from your Server tab of the Ganache Settings section.

     • It has to be in the format http://<hostname>:<port>

     • Since we are running on local, it would mostly be http://127.0.0.1:7545

3. Chain ID

   • For some reason, the default chain id for Ganache in MetaMask is 1337

4. Currency Symbol

   • This is optional and no harm in choosing one.

   • I will leave it blank for now

5. Block Explorer URL

   • At this time, the GitHub issue to make it possible is being worked upon.

   • I will leave it blank for now

Now, pick up one of your accounts from Ganache and add import it to MetaMask wallet, so that you can use the available ETH using MetaMask wallet. Follow the below steps:

1. Open MetaMask wallet and Click on the Account Circle

2. Below the account list, choose Import Account

3. Pick one address from Ganache Desktop UI and copy the Private key from the Key symbol at the right end.

4. Paste your private key string to MetaMask

All basics done to begin now!!

Let’s create a New Web Application using Angular. It is ok to have an already existing project in Angular. We will not make changes to your existing code.

Create a new service called Web3Service – web3.service.ts

ng generate service services/web3

In the web3.service.ts, let’s add the below code:

web3Provider:any = null;

connectToMetaMask(){

    let ethereum = window['ethereum'];
    if (typeof ethereum !== 'undefined') {
      console.log('MetaMask is installed!');
    }
    if (ethereum) {
      this.web3Provider = ethereum;
      try {
        // Request account access
        ethereum.request({ method: 'eth_requestAccounts' }).then( (address:any) => {
          console.log("Account connected: ", address[0]); // Account address that you had imported
        });
      } catch (error) {
        // User denied account access...
        console.error("User denied account access");
      }
    }
  }

Now, you can see that the web3Provider object is global and can be accessed from any component for further APIs by importing the Web3 Service.

The function connectToMetaMask() can be invoked on a Connect Button click. You will be redirected to MetaMask window, asking for a confirmation to accept the authorisation. Once you accept, you will see the below output in your browser console.

Account connected: 0x91bDEaDA4E7cacd507dcb5874da9C5DE8b73dd3e

This was the account we had imported to the MetaMask from Ganache.

Hope that helped. Please comment below, if you are facing any issues.