Skip to content

Commit

Permalink
webpack 5 support angular instructions Closes #4174 (#4342)
Browse files Browse the repository at this point in the history
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 <wyatt@writerof.software>
  • Loading branch information
luu-alex and spacesailor24 committed Sep 30, 2021
1 parent d4155d6 commit 202be5b
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 1 deletion.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
45 changes: 44 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 202be5b

Please sign in to comment.