From 50d6ce249ba3e8382f02e03862cff1b929df1385 Mon Sep 17 00:00:00 2001 From: Alex Date: Tue, 21 Sep 2021 21:12:53 -0400 Subject: [PATCH 1/6] updating readme and including instructions for angular fix --- README.md | 45 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/README.md b/README.md index bf7824827bb..5d86ef6b781 100644 --- a/README.md +++ b/README.md @@ -104,12 +104,57 @@ 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. + +To work around this: + + +install the required dependancies within your angular project: + +`npm install 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 dependancies + +``` +{ + "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: +``` + (window as any).global = window; + import { Buffer } from 'buffer'; + 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 + + + ## Documentation Documentation can be found at [ReadTheDocs][docs]. From a506736ee9bb28c631287e96aafff0dad4fed160 Mon Sep 17 00:00:00 2001 From: Alex Date: Tue, 21 Sep 2021 21:14:49 -0400 Subject: [PATCH 2/6] updating instructions --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 5d86ef6b781..aa0657fe17e 100644 --- a/README.md +++ b/README.md @@ -107,7 +107,8 @@ If you are using the types in a `commonjs` module, like in a Node app, you just ### 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. +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. To work around this: @@ -144,7 +145,7 @@ Add the following lines to `polyfills.ts` file: } as any; ``` -## Old solution +### 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` From 76dac4e5c41a9456252c442c40d6973cf7333765 Mon Sep 17 00:00:00 2001 From: Alex Date: Tue, 21 Sep 2021 21:23:32 -0400 Subject: [PATCH 3/6] updated readme --- CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0e67e901b3a..433bd778b26 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -447,4 +447,5 @@ Released with 1.0.0-beta.37 code base. - lerna from 3.22.1 to 4.0.0 (#4231) - Dropped build tests in CI for Node v8 and v10, and added support for Node v14 - Change default value for `maxPriorityFeePerGas` from `1 Gwei` to `2.5 Gwei` (#4284) -- Fixed bug in signTransaction (#4295) \ No newline at end of file +- Fixed bug in signTransaction (#4295) +- updated readme to include webpack 5 angular support instructions (#4174) \ No newline at end of file From b8ad5c4c53d2751e51e34b2c7473d4b85ef1da8f Mon Sep 17 00:00:00 2001 From: Wyatt Barnes Date: Tue, 21 Sep 2021 18:24:21 -1000 Subject: [PATCH 4/6] Formatting nitpick in CHANGELOG --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 433bd778b26..723e62488a2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -448,4 +448,4 @@ Released with 1.0.0-beta.37 code base. - Dropped build tests in CI for Node v8 and v10, and added support for Node v14 - Change default value for `maxPriorityFeePerGas` from `1 Gwei` to `2.5 Gwei` (#4284) - Fixed bug in signTransaction (#4295) -- updated readme to include webpack 5 angular support instructions (#4174) \ No newline at end of file +- Updated readme to include webpack 5 angular support instructions (#4174) \ No newline at end of file From 695aad111954b4bd828ee7957a2bda72a2ce92fb Mon Sep 17 00:00:00 2001 From: Alex Date: Wed, 22 Sep 2021 00:33:30 -0400 Subject: [PATCH 5/6] formatting --- README.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/README.md b/README.md index 43c71e11f82..a7dd346e247 100644 --- a/README.md +++ b/README.md @@ -107,8 +107,7 @@ If you are using the types in a `commonjs` module, like in a Node app, you just ### 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. +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. To work around this: @@ -153,9 +152,6 @@ a work around for this is to go into your node-modules and at `/angular-cli-file Another variation of this problem was an issue opned on angular-cli: https://github.com/angular/angular-cli/issues/1548 - - - ## Documentation Documentation can be found at [ReadTheDocs][docs]. From 622698afa11641e31ef55fd318000fdbf038745e Mon Sep 17 00:00:00 2001 From: Wyatt Barnes Date: Tue, 21 Sep 2021 18:53:38 -1000 Subject: [PATCH 6/6] Formatting and typos (#4343) * Formatting and typos * Update README.md * Update formatting * Formatting * Update README.md --- README.md | 49 +++++++++++++++++++++++++------------------------ 1 file changed, 25 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index a7dd346e247..74d518f98fa 100644 --- a/README.md +++ b/README.md @@ -109,39 +109,40 @@ If you are using the types in a `commonjs` module, like in a Node app, you just 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. -To work around this: +- Install the required dependencies within your angular project: +```bash +npm install --save-dev crypto-browserify stream-browserify assert stream-http https-browserify os-browserify +``` -install the required dependancies within your angular project: - -`npm install 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 dependancies +- 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"], + "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: -``` - (window as any).global = window; - import { Buffer } from 'buffer'; - global.Buffer = Buffer; - global.process = { +- 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; +} as any; ``` ### Old solution @@ -150,7 +151,7 @@ If you are using Ionic/Angular at a version >5 you may run into a build error in 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