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

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: {