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-app

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

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…

View on GitHub

DEV Community

Angular Web3