webpack 5 support angular instructions Closes #4174

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) 
+- Fixed bug in signTransaction (#4295) 
+- updated readme to include webpack 5 angular support instructions (#4174)

README.md

@@ -104,12 +104,58 @@ 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].