Guía definitiva para usar librerías web3 en Angular.
Si has intentado crear un proyecto de web3 o buscado documentación, es muy probable que encontraras que muchas están destinadas a React u otros frameworks afortunadamente el error es común y fácil de arreglar.
Error: Module not found: Error: Can't resolve 'crypto'.
Este es muy común en versiones con Ivy, a partir de la v12 hasta la más actual, así que solo hacemos lo siguiente:
Configuración
Generar un nuevo proyecto.
ng new nombre-appInstalar web3 y sus dependencias con:
npm i web3 -S
npm i crypto-browserify stream-browserify assert stream-http https-browserify os-browserify browser url os-browserify process -S-
Agrega lo siguiente al polyfills.ts:
-
Agrega lo siguiente al tsconfig.json:
-
Genera un Web3 service
ng g service web3
-
Consume el servicio desde el componente que quieras
ng serve y ng build no debería mostrar ningún problema
Si aparece un error con @types/node haz:
npm i -S @types/node
Then in tsconfig.json
"angularCompilerOptions": {
"types" : ["node"]
....
}
Extra Si deseas usar un template aqui hice uno:
AntonioCardenas
/
AngularWeb3
Template for Angular and web3 dependencies
Angular Web3 DApp
A modern decentralized application (DApp) built with Angular and ethers.js for Ethereum blockchain integration.
Features
- Wallet Connection: Connect to MetaMask and other Web3 wallets
- Transaction Sending: Send ETH transactions with real-time gas price
- Smart Contract Interaction: Interact with ERC-20 tokens and other smart contracts
- Real-time Updates: Live wallet balance and network information
- Modern UI: Beautiful, responsive design with smooth animations
- TypeScript Support: Full type safety with ethers.js v6
Technologies Used
- Angular 17: Latest Angular framework with standalone components
- ethers.js v6: Complete Ethereum wallet implementation and utilities
- TypeScript: Type-safe development
- SCSS: Advanced styling with CSS Grid and Flexbox
- RxJS: Reactive programming for state management
- PrimeNG: Professional UI components
Installation
-
Clone the repository:
git clone <repository-url> cd angularweb3
-
Install dependencies:
npm install
-
Start the development server:
npm start
-
Open your browser and…

Top comments (0)