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¶
-
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
-
Download the box.
truffle unbox Quintor/angular-truffle-box
-
Run your Ethereum client. For Ganache CLI:
Note the mnemonic 12-word phrase printed on startup, you will need it later.ganache-cli
-
Compile and migrate your contracts.
truffle compile && truffle migrate
Configuration¶
- In order to connect with the Ethereum network, you will need to configure MetaMask
- Log into the
ganache-cli
test accounts in MetaMask, using the 12-word phrase printed earlier.- A detailed explaination of how to do this can be found here
- Normally, the available test accounts will change whenever you restart
ganache-cli
. - 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
organache-cli -m "put your mnemonic phrase here needs twelve words to work with MetaMask"
- Normally, the available test accounts will change whenever you restart
- A detailed explaination of how to do this can be found here
- Point MetaMask to
ganache-cli
by connecting to the networklocalhost:8545
Running¶
-
Run the app using Angular CLI:
The app is now served on localhost:4200npm start
-
Making sure you have configured MetaMask, visit http://localhost:4200 in your browser.
-
Send MetaCoins!
Testing¶
-
Running the Angular component tests:
ng test
-
Running the Truffle tests:
truffle test
-
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 totruffle-config.js