使用Webpack 2+AngularJS点击按钮报错：myContract.sendFunds(...).then不是函数

云上老周

2026-5-19

Hey there, let's break down why you're hitting that TypeError: myContract.sendFunds(...).then is not a function error while using Webpack 2 + AngularJS, and fix it step by step!

Common Causes & Solutions

1. Web3 Version Mismatch (Most Likely Culprit)

Web3.js v0.x and v1.x handle async operations very differently:

Web3 v0.x: Write operations (like sending funds) use callback functions by default—they don't return a Promise, so .then() won't work.
Web3 v1.x: Most methods return Promises natively, so .then() is supported out of the box.

If you're stuck on v0.x, wrap the callback-based function in a Promise manually:

// Wrap sendFunds in a Promise to use .then()
function sendFundsWithPromise(params, fromAddress, value) {
  return new Promise((resolve, reject) => {
    myContract.sendFunds(params, { from: fromAddress, value: value }, (err, txHash) => {
      if (err) reject(err);
      else resolve(txHash);
    });
  });
}

// Now you can use .then() in your AngularJS controller
$scope.handleSendFunds = function() {
  sendFundsWithPromise(yourParams, userAddress, web3.toWei('0.5', 'ether'))
    .then(txHash => {
      console.log('Transaction sent! Hash:', txHash);
    })
    .catch(err => {
      console.error('Error sending funds:', err);
    });
};

If you can upgrade to Web3 v1.x, the syntax becomes cleaner (native Promise support):

// In your AngularJS service/controller
const myContract = new web3.eth.Contract(contractABI, contractAddress);

$scope.handleSendFunds = function() {
  myContract.methods.sendFunds(yourParams)
    .send({ from: userAddress, value: web3.utils.toWei('0.5', 'ether') })
    .then(receipt => {
      console.log('Transaction confirmed:', receipt);
    })
    .catch(err => {
      console.error('Error:', err);
    });
};

2. Webpack Packaging Quirks

Webpack can sometimes mess with how Web3 is imported or initialized. Make sure you're loading Web3 correctly in your AngularJS app:

// Import Web3 (adjust based on your version)
// For v1.x
import Web3 from 'web3';
// For v0.x
const Web3 = require('web3');

// Initialize Web3 in an AngularJS service (to avoid global scope issues)
angular.module('yourApp').service('web3Service', function() {
  this.web3 = new Web3(Web3.givenProvider || 'http://localhost:8545');
  this.myContract = new this.web3.eth.Contract(contractABI, contractAddress);
});

3. Verify Your Contract ABI & Function Type

Double-check that your contract's ABI correctly defines sendFunds (especially if it's a payable function—missing this can break method generation).
If sendFunds is a read-only operation (unlikely given the name), you need to use .call() instead of directly invoking the method:
```
myContract.sendFunds.call(params).then(result => { /* handle result */ });
```

Quick Recap

The error almost always boils down to your sendFunds method not returning a Promise. Either wrap the callback in a Promise (for v0.x) or upgrade to Web3 v1.x for native Promise support. Also ensure Webpack is loading Web3 correctly in your AngularJS setup.

内容的提问来源于stack exchange，提问作者crypto money