Angular App not working on IOS devices, deployed on Heroku

Question

I have developed an app using the MEAN stack (MongoDB, Express JS, Angular, Node JS) and deployed it on Heroku. Here is the link to my site

https://vuies-portal.herokuapp.com/

For some odd reason, It does not work on devices running IOS. It works on Android. The application gets stuck on the loading screen and never takes you to the home page, this is only the case for IOS devices. I'm not able to pinpoint what the reason for this could be. It might be related to the scripts I have imported or the Javascript version, not sure. Can someone please help.

The Angular-Cli version is 8.0.2

I have deployed the app using the command: ng build --prod

Here is my package.json file

{
  "name": "angular-src",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.1.0",
    "@angular/animations": "~8.0.0",
    "@angular/cdk": "~8.2.3",
    "@angular/common": "~8.0.0",
    "@angular/compiler": "~8.0.0",
    "@angular/core": "~8.0.0",
    "@angular/forms": "~8.0.0",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "~8.0.0",
    "@angular/platform-browser-dynamic": "~8.0.0",
    "@angular/router": "~8.0.0",
    "@auth0/angular-jwt": "^3.0.1",
    "@types/googlemaps": "^3.39.0",
    "angular-bootstrap-md": "^7.5.4",
    "angular-font-awesome": "^3.1.2",
    "bootstrap": "^4.4.1",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.4.1",
    "popper.js": "^1.16.0",
    "rxjs": "~6.4.0",
    "save": "^2.4.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.0",
    "@angular/cli": "~8.0.2",
    "@angular/compiler-cli": "~8.0.0",
    "@angular/language-service": "~8.0.0",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }
}

Styles and Scripts in my angular.json:

"styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "./node_modules/bootstrap/scss/bootstrap.scss",
              "./node_modules/font-awesome/scss/font-awesome.scss",
              "./node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
              "./node_modules/angular-bootstrap-md/scss/mdb-free.scss",
              "src/styles.scss"
            ],
"scripts": [
              "./src/assets/particles/particles.min.js",
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

Answer 1

Edit package.json to add a start npm run script:

    "start": "node server.js",

and make sure you have server.js file in the project root directory.

This article describes the above.: https://medium.com/@ryanchenkie_40935/angular-cli-deployment-host-your-angular-2-app-on-heroku-3f266f13f352

Add a post-install command in package.json

This is also described in the above article.