UI issues and typeError after deploying ionic/Angular to webserver

Ionic Framework Ionic Angular
1

Hello Ionic Community,

We are encountering some challenges with an app developed using Ionic and Angular. In our local development environment, the app operates smoothly when we use ng serve. However, we are facing issues after deploying it to a webserver.

We build the app using either ionic build --prod or ng build, and then deploy it to an HTTP server. Post-deployment, we are observing the following problems:

  1. UI Breakage: The app’s header, which is visible in local testing, becomes hidden on the deployed version. The header still appears in the source code when inspected via Chrome.
  2. JavaScript Error: On a specific page of the app when using <ion-infinite-scroll>, we encounter the following JavaScript error:
ERROR Error: Uncaught (in promise): TypeError: ve.getScrollElement is not a function

For context, we are using Angular version 16.0.0 and Ionic version 7.5.0.

Could anyone provide insights or suggest potential solutions for these issues? Any guidance on troubleshooting or resolving these problems would be greatly appreciated.

Thank you in advance for your assistance!

2

I’ve resolved the issue for now by setting "buildOptimizer": false in angular.json.