cannot compile angular 8 app after import web3 ver "^1.2.1"

[nasraldin]

Description

I create a new angular 8 app with any third part libs then I install web3 lib by npm install web3 this will install the latest version of web3 "^1.2.1" after that I import Web3 from 'web3';
in my ng Component just simple implement of web3 calling

// this my Component implement of web3

import { Component, OnInit } from '@angular/core';
import { IEnsRegistrar } from '../../ens-registrar';
import Web3 from 'web3';
import { HttpClient } from '@angular/common/http';

declare let window: any;

@component({
selector: 'app-blank',
templateUrl: './blank.component.html',
styleUrls: ['./blank.component.css']
})
export class BlankComponent implements OnInit {

private web3: Web3;

constructor(private http: HttpClient) {
window.addEventListener('load', event => {});
}

ngOnInit() {
if (window.ethereum) {
console.log('Detect MetaMask has successfully connected.');
// use MetaMask's provider
this.web3 = new Web3(window.ethereum);

  // get permission to access accounts
  window.ethereum.enable();
}

}
}

Expected behavior

compile success app without any compiling errors and show the log msg in console "Detect MetaMask has successfully connected"

Actual behavior

WARNING in ./node_modules/web3-eth-accounts/src/scrypt.js 17:50-60
Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/asn1.js/lib/asn1/api.js
Module not found: Error: Can't resolve 'vm' in 'D:\source\github\repos\ens_contract_events\ens_contract_events\node_modules\asn1.js\lib\asn1'

ERROR in ./node_modules/eth-lib/lib/bytes.js
Module not found: Error: Can't resolve 'crypto' in 'D:\source\github\repos\ens_contract_events\ens_contract_events\node_modules\eth-lib\lib'
ERROR in ./node_modules/scryptsy/lib/scryptSync.js
Module not found: Error: Can't resolve 'crypto' in 'D:\source\github\repos\ens_contract_events\ens_contract_events\node_modules\scryptsy\lib'
ERROR in ./node_modules/scryptsy/lib/scrypt.js
Module not found: Error: Can't resolve 'crypto' in 'D:\source\github\repos\ens_contract_events\ens_contract_events\node_modules\scryptsy\lib'
ERROR in ./node_modules/scryptsy/lib/utils.js
Module not found: Error: Can't resolve 'crypto' in 'D:\source\github\repos\ens_contract_events\ens_contract_events\node_modules\scryptsy\lib'
ERROR in ./node_modules/web3-eth-accounts/node_modules/eth-lib/lib/bytes.js
Module not found: Error: Can't resolve 'crypto' in 'D:\source\github\repos\ens_contract_events\ens_contract_events\node_modules\web3-eth-accounts\node_modules\eth-lib\lib'
ERROR in ./node_modules/web3-eth-accounts/src/index.js
Module not found: Error: Can't resolve 'crypto' in 'D:\source\github\repos\ens_contract_events\ens_contract_events\node_modules\web3-eth-accounts\src'
ERROR in ./node_modules/web3-eth-accounts/src/scrypt.js
Module not found: Error: Can't resolve 'crypto' in 'D:\source\github\repos\ens_contract_events\ens_contract_events\node_modules\web3-eth-accounts\src'
ERROR in ./node_modules/web3-providers-http/src/index.js
Module not found: Error: Can't resolve 'http' in 'D:\source\github\repos\ens_contract_events\ens_contract_events\node_modules\web3-providers-http\src'
ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js
Module not found: Error: Can't resolve 'http' in 'D:\source\github\repos\ens_contract_events\ens_contract_events\node_modules\xhr2-cookies\dist'9m
ERROR in ./node_modules/web3-providers-http/src/index.js
Module not found: Error: Can't resolve 'https' in 'D:\source\github\repos\ens_contract_events\ens_contract_events\node_modules\web3-providers-http\src'
ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js
Module not found: Error: Can't resolve 'https' in 'D:\source\github\repos\ens_contract_events\ens_contract_events\node_modules\xhr2-cookies\dist'
ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js
Module not found: Error: Can't resolve 'https' in 'D:\source\github\repos\ens_contract_events\ens_contract_events\node_modules\web3-providers-http\src'
ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js
Module not found: Error: Can't resolve 'https' in 'D:\source\github\repos\ens_contract_events\ens_contract_events\node_modules\xhr2-cookies\dist'
ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js
Module not found: Error: Can't resolve 'os' in 'D:\source\github\repos\ens_contract_events\ens_contract_events\node_modules\xhr2-cookies\dist'
ERROR in ./node_modules/browserify-sign/browser/index.js
Module not found: Error: Can't resolve 'stream' in 'D:\source\github\repos\ens_contract_events\ens_contract_events\node_modules\browserify-sign\browser'
ERROR in ./node_modules/cipher-base/index.js
Module not found: Error: Can't resolve 'stream' in 'D:\source\github\repos\ens_contract_events\ens_contract_events\node_modules\cipher-base'
ERROR in ./node_modules/hash-base/index.js
Module not found: Error: Can't resolve 'stream' in 'D:\source\github\repos\ens_contract_events\ens_contract_events\node_modules\hash-base'
i ｢wdm｣: Failed to compile.

Steps to reproduce the behavior

Error Logs

Gists

Versions

• web3.js: ^1.2.1
• nodejs: 12.11.1
• browser: chrome
• ethereum node: https://infura.io

[nivida]

Duplication of #3018