Skip to content

Commit

Permalink
fix(examples): front-end packages missing browserify polyfills #1224
Browse files Browse the repository at this point in the history
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>
petermetz committed Aug 19, 2021
1 parent dcf4c46 commit 4cc6f2c
Showing 11 changed files with 888 additions and 29 deletions.
Original file line number Diff line number Diff line change
@@ -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.
14 changes: 11 additions & 3 deletions examples/cactus-example-carbon-accounting-frontend/angular.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
}
}
Original file line number Diff line number Diff line change
@@ -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",
Original file line number Diff line number Diff line change
@@ -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"),
},
},
};
7 changes: 7 additions & 0 deletions examples/cactus-example-supply-chain-frontend/.browserslistrc
Original file line number Diff line number Diff line change
@@ -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.
8 changes: 7 additions & 1 deletion examples/cactus-example-supply-chain-frontend/angular.json
Original file line number Diff line number Diff line change
@@ -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",
4 changes: 3 additions & 1 deletion examples/cactus-example-supply-chain-frontend/package.json
Original file line number Diff line number Diff line change
@@ -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",
Original file line number Diff line number Diff line change
@@ -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"),
},
},
};
3 changes: 3 additions & 0 deletions webpack.dev.web.js
Original file line number Diff line number Diff line change
@@ -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: {
3 changes: 3 additions & 0 deletions webpack.prod.web.js
Original file line number Diff line number Diff line change
@@ -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: {
813 changes: 789 additions & 24 deletions yarn.lock

Large diffs are not rendered by default.

0 comments on commit 4cc6f2c

Please sign in to comment.