Skip to content
Truffle Box for Angular is a quick-and-easy way to get your Dapp on the road with Truffle and Angular
TypeScript JavaScript HTML Shell CSS
Branch: master
Clone or download
pimotte Merge pull request #49 from Quintor/fix/doc-link
Correct link to truffle-metamask docs
Latest commit f6eb38e Feb 26, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
ci Update documentation and CI to ganache-cli May 24, 2018
contracts Update to truffle 5 Jan 11, 2019
e2e Update to truffle 5 Jan 11, 2019
migrations Initial working version of MetaCoin Sep 10, 2017
src Update to truffle 5 Jan 11, 2019
test Update to truffle 5 Jan 11, 2019
.editorconfig chore: initial commit from @angular/cli Sep 10, 2017
.gitignore Initial working version of MetaCoin Sep 10, 2017
.travis.yml Add chrome as addon Mar 10, 2018
LICENSE Add LICENSE Sep 21, 2017
NOTICE Adding NOTICE Sep 21, 2017
README.md Correct link to truffle-metamask docs Feb 26, 2019
angular.json Updating to angular 6, includes ugly fix with patch.js to post-proces… Sep 14, 2018
box-img-lg.png Adding Quintor/Angular .pngs Sep 19, 2017
box-img-sm.png Adding Quintor/Angular .pngs Sep 19, 2017
karma.conf.js Updating to angular 6, includes ugly fix with patch.js to post-proces… Sep 14, 2018
package-lock.json Bumping @angular-devkit/build-angular due to vulnerability Jan 11, 2019
package.json Bumping @angular-devkit/build-angular due to vulnerability Jan 11, 2019
patch.js Revert "Remove monkeypatch" Nov 28, 2018
protractor.conf.js Running chrome without sandbox, because it cannot do so in a containe… Mar 10, 2018
truffle-box.json Corrected npm run commands to ng in truffle-box config Sep 18, 2017
truffle.js Pretty material UI Apr 24, 2018
tsconfig.json Update to truffle 5 Jan 11, 2019
tslint.json Remove outdated linting rules Nov 28, 2018

README.md

Truffle Box for Angular

This Truffle Box provides a base for working with the Truffle Framework and Angular. It provides a basic working example of the MetaCoin contracts with Angular components. This project is generated with Angular CLI.

Prerequisites

In order to run the Truffle box, you will need Node.js (tested with version 10.x.y). This will include npm, needed to install dependencies. In order install these dependencies, you will also need Python (version 2.7.x) and git. You will also need the MetaMask plugin for Chrome.

Building

  1. Install truffle, Angular CLI and an Ethereum client. If you don't have a test environment, we recommend ganache-cli
npm install -g truffle
npm install -g @angular/cli
npm install -g ganache-cli
  1. Download the box.
truffle unbox Quintor/angular-truffle-box
  1. Run your Ethereum client. For Ganache CLI:
ganache-cli

Note the mnemonic 12-word phrase printed on startup, you will need it later.

  1. Compile and migrate your contracts.
truffle compile && truffle migrate

Configuration

  1. In order to connect with the Ethereum network, you will need to configure MetaMask
  2. Log into the ganache-cli test accounts in MetaMask, using the 12-word phrase printed earlier.
    1. A detailed explaination of how to do this can be found here
      1. Normally, the available test accounts will change whenever you restart ganache-cli.
      2. In order to receive the same test accounts every time you start ganache-cli, start it with a seed like this: ganache-cli --seed 0 or ganache-cli -m "put your mnemonic phrase here needs twelve words to work with MetaMask"
  3. Point MetaMask to ganache-cli by connecting to the network localhost:8545

Running

  1. Run the app using Angular CLI:
npm start

The app is now served on localhost:4200

  1. Making sure you have configured MetaMask, visit http://localhost:4200 in your browser.

  2. Send MetaCoins!

Testing

  1. Running the Angular component tests:
ng test
  1. Running the Truffle tests:
truffle test
  1. Running Protactor end-to-end tests
ng e2e

Releasing

Using the Angular CLI you can build a distributable of your app. Will be placed in dist/

ng build

FAQ

  • Where can I find more documentation?

This Truffle box is a union of Truffle and an Angular setup created with Angular CLI. For solidity compilation and Ethereum related issues, try the Truffle documentation. For Angular CLI and typescript issues, refer to the Angular CLI documentation

  • Common errors and their solutions
Error Solution
Module not found: Error: Can't resolve '../../../../build/contracts/MetaCoin.json' during ng serve Run truffle compile
Error: the tx doesn't have the correct nonce. in MetaMask Reset MetaMask: Settings -> Reset Account
Error getting balance; see log. in UI, with Error: MetaCoin has not been deployed to detected network (network/artifact mismatch) in browser console Ensure you have started ganache, run truffle migrate and configured MetaMask to point to ganache
  • How do I get this to work on Windows?

Possible issues:

  • If you're missing a C++ compiler, run npm install --global --production windows-build-tools in a cmd with administrative rights.
  • If the truffle.js file opens when you're trying to run truffle commands, rename the file to truffle-config.js
You can’t perform that action at this time.