From 202be5b9ab848bc25f3a9948fe7dc84c7e57a66f Mon Sep 17 00:00:00 2001 From: Alex Date: Thu, 30 Sep 2021 14:10:58 -0400 Subject: [PATCH] webpack 5 support angular instructions Closes #4174 (#4342) Merging manually because this is a `README.md` change that won't cause tests to run * updating readme and including instructions for angular fix * updating instructions * updated readme * Formatting nitpick in CHANGELOG * formatting * Formatting and typos (#4343) * Formatting and typos * Update README.md * Update formatting * Formatting * Update README.md Co-authored-by: Wyatt Barnes --- CHANGELOG.md | 1 + README.md | 45 ++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 45 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a9dcb72b421..20cb5861ac7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -464,3 +464,4 @@ Released with 1.0.0-beta.37 code base. - Not considering `tx.chainId` if `tx.common.customChain.chainId` is provided for `web3.eth.accounts.signTransaction` function (#4293) - Added missing PromiEvent handler types (#4194) +- Updated README to include Webpack 5 angular support instructions (#4174) diff --git a/README.md b/README.md index ac45938fad9..74d518f98fa 100644 --- a/README.md +++ b/README.md @@ -104,11 +104,54 @@ If you are using the types in a `commonjs` module, like in a Node app, you just ## Trouble shooting and known issues. ### Web3 and Angular + +### New solution + +If you are using Angular version >11 and run into an issue building, the old solution below will not work. This is because polyfills are not included in the newest version of Angular. + +- Install the required dependencies within your angular project: + +```bash +npm install --save-dev crypto-browserify stream-browserify assert stream-http https-browserify os-browserify +``` + +- Within `tsconfig.json` add the following `paths` in `compilerOptions` so Webpack can get the correct dependencies + +```typescript +{ + "compilerOptions": { + "paths" : { + "crypto": ["./node_modules/crypto-browserify"], + "stream": ["./node_modules/stream-browserify"], + "assert": ["./node_modules/assert"], + "http": ["./node_modules/stream-http"], + "https": ["./node_modules/https-browserify"], + "os": ["./node_modules/os-browserify"], + } +} +``` + +- Add the following lines to `polyfills.ts` file: + +```typescript +import { Buffer } from 'buffer'; + +(window as any).global = window; +global.Buffer = Buffer; +global.process = { + env: { DEBUG: undefined }, + version: '', + nextTick: require('next-tick') +} as any; +``` + +### Old solution + If you are using Ionic/Angular at a version >5 you may run into a build error in which modules `crypto` and `stream` are `undefined` a work around for this is to go into your node-modules and at `/angular-cli-files/models/webpack-configs/browser.js` change the `node: false` to `node: {crypto: true, stream: true}` as mentioned [here](https://github.com/ethereum/web3.js/issues/2260#issuecomment-458519127) -Another variation of this problem was an issue opned on angular-cli: https://github.com/angular/angular-cli/issues/1548 +Another variation of this problem was an [issue opned on angular-cli](https://github.com/angular/angular-cli/issues/1548) ## Documentation