fix(examples): front-end packages missing browserify polyfills #1224

The webpack build done by the Angular CLI (ng) was broken due to a few
different issues combined together:
1. After upgrading to Angular v12 IE 11 is no longer supported which
necessitated the explicit configuration in the browserlist rc config
file accordingly so that the compilation process does not try to support
a browser for which the build is broken to begin with.
2. polyfills had to be added via customizing the webpack configuration
used by the Angular CLI internally which is now being done by using a
custom builder as specified in the angular.json file. This is the new
method of dealing with these kind of issues after the ng eject command
was deprecated a while back. The webpack.config.overrides.js files
that are beind added in this commit contain only the overrides (as the
name suggests) not the entire webpack configuration that the Angular
CLI uses internally to build the front end packages.

Fixes #1224

Signed-off-by: Peter Somogyvari <peter.somogyvari@accenture.com>

examples/cactus-example-carbon-accounting-frontend/.browserslistrc

@@ -0,0 +1,7 @@
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

examples/cactus-example-carbon-accounting-frontend/angular.json

@@ -12,8 +12,14 @@
       "schematics": {},
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-builders/custom-webpack:browser",
           "options": {
+            "customWebpackConfig": {
+              "path": "./webpack.config.overrides.js",
+              "mergeRules": {
+                "externals": "replace"
+              }
+            },
             "outputPath": "www",
             "index": "src/index.html",
             "main": "src/main.ts",
@@ -137,7 +143,9 @@
               "tsconfig.spec.json",
               "e2e/tsconfig.json"
             ],
-            "exclude": ["**/node_modules/**"]
+            "exclude": [
+              "**/node_modules/**"
+            ]
           }
         },
         "e2e": {
@@ -193,4 +201,4 @@
       "styleext": "scss"
     }
   }
-}
+}

examples/cactus-example-carbon-accounting-frontend/package.json

@@ -38,6 +38,7 @@
     "zone.js": "0.11.4"
   },
   "devDependencies": {
+    "@angular-builders/custom-webpack": "12.1.0",
     "@angular-devkit/build-angular": "12.1.1",
     "@angular/cli": "12.1.1",
     "@angular/compiler": "12.1.1",
@@ -47,13 +48,16 @@
     "@types/jasminewd2": "2.0.3",
     "@types/node": "12.11.1",
     "codelyzer": "6.0.2",
+    "https-browserify": "1.0.0",
     "jasmine-core": "3.6.0",
     "jasmine-spec-reporter": "5.0.0",
     "karma": "6.3.4",
     "karma-chrome-launcher": "3.1.0",
     "karma-coverage-istanbul-reporter": "3.0.2",
     "karma-jasmine": "4.0.0",
     "karma-jasmine-html-reporter": "1.5.0",
+    "os-browserify": "0.3.0",
+    "path-browserify": "1.0.1",
     "protractor": "7.0.0",
     "ts-node": "8.3.0",
     "tslint": "6.1.0",

examples/cactus-example-carbon-accounting-frontend/webpack.config.overrides.js

@@ -0,0 +1,19 @@
+/** @type {import("webpack").Configuration} */
+module.exports = {
+  externals: {
+    express: "express",
+    "prom-client": "prom-client",
+  },
+  resolve: {
+    fallback: {
+      crypto: require.resolve("crypto-browserify"),
+      buffer: require.resolve("buffer/"),
+      http: require.resolve("stream-http"),
+      https: require.resolve("https-browserify"),
+      os: require.resolve("os-browserify/browser"),
+      path: require.resolve("path-browserify"),
+      stream: require.resolve("stream-browserify"),
+      zlib: require.resolve("browserify-zlib"),
+    },
+  },
+};

examples/cactus-example-supply-chain-frontend/.browserslistrc

@@ -0,0 +1,7 @@
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

examples/cactus-example-supply-chain-frontend/angular.json

@@ -12,8 +12,14 @@
       "schematics": {},
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-builders/custom-webpack:browser",
           "options": {
+            "customWebpackConfig": {
+              "path": "./webpack.config.overrides.js",
+              "mergeRules": {
+                "externals": "replace"
+              }
+            },
             "outputPath": "www",
             "index": "src/index.html",
             "main": "src/main.ts",

examples/cactus-example-supply-chain-frontend/package.json

@@ -8,7 +8,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "build": "ng build",
+    "build": "ng build --verbose",
     "serve": "ng serve",
     "serve:proxy": "ng serve -- --proxy-config proxy.conf.json",
     "build:dev:frontend": "ng build",
@@ -39,6 +39,7 @@
     "zone.js": "0.11.4"
   },
   "devDependencies": {
+    "@angular-builders/custom-webpack": "12.1.0",
     "@angular-devkit/build-angular": "12.1.1",
     "@angular/cli": "12.1.1",
     "@angular/compiler": "12.1.1",
@@ -48,6 +49,7 @@
     "@types/jasminewd2": "2.0.3",
     "@types/node": "12.11.1",
     "codelyzer": "6.0.2",
+    "constants-browserify": "1.0.0",
     "jasmine-core": "3.6.0",
     "jasmine-spec-reporter": "5.0.0",
     "karma": "6.3.4",

examples/cactus-example-supply-chain-frontend/webpack.config.overrides.js

@@ -0,0 +1,35 @@
+/** @type {import("webpack").Configuration} */
+module.exports = {
+  externals: {
+    "@fidm/x509": "@fidm/x509",
+    "@grpc/grpc-js": "@grpc/grpc-js",
+    "@grpc/proto-loader": "@grpc/proto-loader",
+    busboy: "busboy",
+    child_process: "child_process",
+    "cross-spawn": "cross-spawn",
+    decompress: "decompress",
+    express: "express",
+    "fabric-ca-client": "fabric-ca-client",
+    "fabric-common": "fabric-common",
+    "fabric-network": "fabric-network",
+    "fd-slicer": "fd-slicer",
+    fs: "fs",
+    "node-ssh": "node-ssh",
+    "prom-client": "prom-client",
+    yargs: "yargs",
+    winston: "winston",
+  },
+  resolve: {
+    fallback: {
+      constants: require.resolve("constants-browserify"),
+      crypto: require.resolve("crypto-browserify"),
+      buffer: require.resolve("buffer/"),
+      http: require.resolve("stream-http"),
+      https: require.resolve("https-browserify"),
+      os: require.resolve("os-browserify/browser"),
+      path: require.resolve("path-browserify"),
+      stream: require.resolve("stream-browserify"),
+      zlib: require.resolve("browserify-zlib"),
+    },
+  },
+};

webpack.dev.web.js

@@ -44,7 +44,10 @@ module.exports = {
     fallback: {
       crypto: require.resolve("crypto-browserify"),
       buffer: require.resolve("buffer/"),
+      http: require.resolve("stream-http"),
+      path: require.resolve("path-browserify"),
       stream: require.resolve("stream-browserify"),
+      zlib: require.resolve("browserify-zlib"),
     },
   },
   output: {

webpack.prod.web.js

@@ -44,7 +44,10 @@ module.exports = {
     fallback: {
       crypto: require.resolve("crypto-browserify"),
       buffer: require.resolve("buffer/"),
+      http: require.resolve("stream-http"),
+      path: require.resolve("path-browserify"),
       stream: require.resolve("stream-browserify"),
+      zlib: require.resolve("browserify-zlib"),
     },
   },
   optimization: {