Angular 14 app shows white screen on iPad when doing 'ng build, but works when doing 'ng s-CodePudding

I'm building an Angular 14 app and testing it on an old iPad Air with iOS 12.4.8 and Chrome 80 and Safari. It works fine on both Chrome 80 and Safari when serving it locally doing:

ng serve --port 1111 --host 0.0.0.0

but when building a release for my website using:

ng build --progress --output-hashing=all --aot=true --optimization --base-href=/

OR when doing ng serve with production flag using:

ng serve --port 1111 --host 0.0.0.0 --configuration production

it just shows a white screen and the angular app never starts.

I've tried to add the following error listener to my index.html:

<script>
  console.log('adding error event listener');
  window.addEventListener("error", function (event) {
    console.error(event.filename);
    console.error(event.message);
    console.error(event.error);
  });
</script>

Then open http://localhost:1111 on the iPad in Chrome 80 and see the following error messages:

LOG adding error event listener
INFO [webpack-dev-server] Server started: Hot Module Replacement disabled, Live Reloading enabled, Progress disabled, Overlay enabled.
ERROR http://192.168.0.111:1111/scripts.js
ERROR SyntaxError: Unexpected token '?'
ERROR SyntaxError: Unexpected token '?'
WARNING [webpack-dev-server] Warnings while compiling.
WARNING [webpack-dev-server] WARNING
1 rules skipped due to selector errors:
  .custom-file-input:lang(en)~.custom-file-label -> unmatched pseudo-class :lang

These error message are not shown when serving locally in dev config where it works fine.

my current browserslist configuration:

"browserslist": [
  "Chrome >= 80",
  "last 10 Firefox versions",
  "last 10 Edge major versions",
  "last 10 Safari major versions",
  "iOS >= 12",
  "Firefox ESR"
],

Angular 14.2.10 Bootstrap 4.6.2

Any hints would be appreciated.

CodePudding user response：

Are you using nullish coalescing in your app i.e. const a = b.c ?? 'd'. That can throw the ? error if it's not supported in the browser - and if you're building/targeting a recent JS version

CodePudding user response：

I found the reason why it worked in development mode, but not in production:

It was caused by the "--optimization" parameter on "ng build" for production. This apparently generates code with the "??" notation which does not work on the old iPad.

Instead I added this parameter to angular.json under the production configuration:

"optimization": {
   "scripts": false,
   "styles": {
     "minify": true,
     "inlineCritical": false
   },
   "fonts": true
}

It then generates code without "??" that works on the iPad due to the "scripts": false setting. The downside is that the source code is directly readable.