iamjaime/angular12-web3.js

## angular12-web3.js
/**
 *
 * Follow these Instructions if you want to get Web3 to work with Angular 12
 *
 **/

// Step 1
// Run the following ....
/**

  ng new <your-project>

 */


// Step 2
// We need to setup the Custom Webpack configurations......
// the easiest way is to run the following command.....

/**

 ng add @angular-architects/module-federation

 */


// Step 3
// We need to install the necessary dependencies....
// Run the following command...

/**

 npm i web3 assert crypto-browserify buffer process stream-browserify os-browserify stream-http https-browserify path-browserify constants-browserify url --save

 */


// Step 4
// We need to update the custom webpack configurations....

/**
 * Inject this at line 1 of webpack.config.js
 *
 * const webpack = require("webpack");
 *
 */


/**
 * Now Inject this snippet into the resolve object
 *
 *
  fallback: {
      http: require.resolve("stream-http"),
      https: require.resolve("https-browserify"),
      crypto: require.resolve("crypto-browserify"),
      stream: require.resolve("stream-browserify"),
      os: require.resolve("os-browserify/browser"),
      url: require.resolve("url"),
      assert: require.resolve("assert"),
    },
 */

/**
 * Now Inject this snippet into the Plugins array
 *
 *
    new webpack.ProvidePlugin({
      Buffer: ["buffer", "Buffer"],
      process: "process/browser",
    }),
 */


// Step 5
// We need to add the Pollyfills.ts fix

/**
 * Inject the following lines of code into the src/Pollyfills.ts
 *

import { Buffer } from 'buffer';
declare var global: any;

global.Buffer = Buffer;


 */


// Step 6
// We need to fix the Process and Buffer Errors....

/**
 * Inject the following lines of code in your index.html file before the <head> closing
 *
 *
 <script>
 var global = global || window; //open this if you take global error

 var process = process || {
      env: {
        DEBUG: undefined
      },
      version: ''
    };
 </script>

 */
	/**
	*
	* Follow these Instructions if you want to get Web3 to work with Angular 12
	*
	**/

	// Step 1
	// Run the following ....
	/**

	ng new <your-project>

	*/


	// Step 2
	// We need to setup the Custom Webpack configurations......
	// the easiest way is to run the following command.....

	/**

	ng add @angular-architects/module-federation

	*/


	// Step 3
	// We need to install the necessary dependencies....
	// Run the following command...

	/**

	npm i web3 assert crypto-browserify buffer process stream-browserify os-browserify stream-http https-browserify path-browserify constants-browserify url --save

	*/


	// Step 4
	// We need to update the custom webpack configurations....

	/**
	* Inject this at line 1 of webpack.config.js
	*
	* const webpack = require("webpack");
	*
	*/


	/**
	* Now Inject this snippet into the resolve object
	*
	*
	fallback: {
	http: require.resolve("stream-http"),
	https: require.resolve("https-browserify"),
	crypto: require.resolve("crypto-browserify"),
	stream: require.resolve("stream-browserify"),
	os: require.resolve("os-browserify/browser"),
	url: require.resolve("url"),
	assert: require.resolve("assert"),
	},
	*/

	/**
	* Now Inject this snippet into the Plugins array
	*
	*
	new webpack.ProvidePlugin({
	Buffer: ["buffer", "Buffer"],
	process: "process/browser",
	}),
	*/


	// Step 5
	// We need to add the Pollyfills.ts fix

	/**
	* Inject the following lines of code into the src/Pollyfills.ts
	*

	import { Buffer } from 'buffer';
	declare var global: any;

	global.Buffer = Buffer;



	*/


	// Step 6
	// We need to fix the Process and Buffer Errors....

	/**
	* Inject the following lines of code in your index.html file before the <head> closing
	*
	*
	<script>
	var global = global \|\| window; //open this if you take global error

	var process = process \|\| {
	env: {
	DEBUG: undefined
	},
	version: ''
	};
	</script>

	*/