DEV Community

Cover image for Angular Web3
Antonio Cardenas for Angular Firebase

Posted on • Edited on

Angular Web3

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

  1. Generar un nuevo proyecto. ng new nombre-app

  2. Instalar 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

  3. Agrega lo siguiente al polyfills.ts:

  4. Agrega lo siguiente al tsconfig.json:

  5. Genera un Web3 service
    ng g service web3

  6. Consume el servicio desde el componente que quieras 

  7. ng serve y ng build no debería mostrar ningún problema

Ejemplo

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:

GitHub logo 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

  1. Clone the repository:

    git clone <repository-url>
    cd angularweb3
    Enter fullscreen mode Exit fullscreen mode
  2. Install dependencies:

    npm install
    Enter fullscreen mode Exit fullscreen mode
  3. Start the development server:

    npm start
    Enter fullscreen mode Exit fullscreen mode
  4. Open your browser and…

Top comments (0)