Not running on webserver after Ionic 6 update form Ionic 5

Hi All

I have recently updated from Ionic 6 from Ionic 5.

The app is being run well so far, but my recent update on the server it seems that its no longer working my login page.

Please see the screen shot.

Has any one else had these issues?

Haven’t seen this before. Any code you can share? Can you pinpoint it down to one component?

Ok, I am not sure, what exactly went wrong, but I had to create a folder called “Web” on the webserver.

Place all the contents of the “www” folder inside the “web” folder and then keep the index.html outside.

Then it worked,

Previously there was no “web” folder.

Has anything changed to cause this?

Nope, there isn’t really anything that change within ionic that would cause that.
If you’re having this issue, it might be something on your end? Have you changed hosting setup?

My hosting package has not changed.

Is there anything in angular may be, which has changed where the index.html file is look into a folder called “web”?

I noticed that my index.html file now has to be set accordingly other wise it does not work on the host server, but when I am running it locally it has to be set as it was originally?

  <base href="/web/"/>

Originally it had

  <base href="/" />

Can this have something to do with this?

There is another post with simular issue, can my issue be related?

Ionic App not serving correctly on web after Ionic 5 to Ionic 6 and Angular 10 to Angular 13 migration (baseHref issue?) - Ionic Framework - Ionic Forum

No need to comment on that older post.

As I stated in the other post, everything worked well when testing. I would confirm you have your angular build tools updated to the correct version.

Can you share your package.json and angular.json?

Thanks please see them below

This is my package.json

{
  "name": "aardraapp",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/architect": "^0.1202.17",
    "@angular/common": "^12.2.16",
    "@angular/core": "^12.2.16",
    "@angular/forms": "^12.2.16",
    "@angular/platform-browser": "^12.2.16",
    "@angular/platform-browser-dynamic": "^12.2.16",
    "@angular/router": "^12.2.16",
    "@capacitor-community/bluetooth-le": "^1.8.2",
    "@capacitor/android": "^3.5.1",
    "@capacitor/app": "^1.1.1",
    "@capacitor/core": "^3.5.1",
    "@capacitor/filesystem": "^1.1.0",
    "@capacitor/geolocation": "^1.3.1",
    "@capacitor/ios": "^3.5.1",
    "@capacitor/push-notifications": "^1.0.9",
    "@ionic-native/app-version": "^5.36.0",
    "@ionic-native/barcode-scanner": "^5.36.0",
    "@ionic-native/core": "^5.36.0",
    "@ionic-native/local-notifications": "^5.36.0",
    "@ionic-native/push": "^5.36.0",
    "@ionic-native/qr-scanner": "^5.36.0",
    "@ionic-native/splash-screen": "^5.36.0",
    "@ionic-native/sqlite": "^5.36.0",
    "@ionic-native/status-bar": "^5.36.0",
    "@ionic/angular": "^6.1.7",
    "@ionic/core": "^6.1.7",
    "build": "^0.1.4",
    "chart.js": "^2.9.4",
    "chartjs-plugin-zoom": "^0.7.7",
    "cordova": "^9.0.0",
    "cordova-android": "^8.1.0",
    "cordova-ios": "^5.1.1",
    "core-js": "^2.6.12",
    "highcharts": "^7.2.2",
    "ios": "0.0.1",
    "jetifier": "^1.6.8",
    "phonegap-plugin-barcodescanner": "^8.1.0",
    "rxjs": "^6.6.7",
    "simple-statistics": "^7.7.5",
    "tslib": "^1.14.1",
    "zone.js": "^0.11.5"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^12.2.17",
    "@angular/cli": "^12.2.17",
    "@angular/compiler": "^12.2.16",
    "@angular/compiler-cli": "^12.2.16",
    "@angular/language-service": "^12.2.16",
    "@capacitor/cli": "^3.5.1",
    "@ionic/angular-toolkit": "^6.1.0",
    "@types/jasmine": "^2.8.19",
    "@types/jasminewd2": "^2.0.10",
    "@types/node": "^12.20.52",
    "codelyzer": "^5.2.2",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.4",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.1.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "^5.4.4",
    "ts-node": "^8.10.2",
    "tslint": "~5.12.0",
    "typescript": "^4.3.0-dev.20210305"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "phonegap-plugin-barcodescanner": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      }
    },
    "platforms": [
      "android"
    ]
  }
}

This is my angular.json

{
  "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
  "version": 1,
  "defaultProject": "app",
  "newProjectRoot": "projects",
  "projects": {
    "app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "aot": true,
            "outputPath": "www",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              },
              {
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
              }
            ],
            "styles": [
              {
                "input": "src/theme/variables.scss"
              },
              {
                "input": "src/global.scss"
              }
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ]
            },
            "ci": {
              "budgets": [
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "progress": false
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            },
            "ci": {
              "progress": false
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "app:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [],
            "scripts": [],
            "assets": [
              {
                "glob": "favicon.ico",
                "input": "src/",
                "output": "/"
              },
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
              }
            ]
          },
          "configurations": {
            "ci": {
              "progress": false,
              "watch": false
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
            "exclude": ["**/node_modules/**"]
          }
        },
        "ionic-cordova-build": {
          "builder": "@ionic/angular-toolkit:cordova-build",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            }
          }
        },
        "ionic-cordova-serve": {
          "builder": "@ionic/angular-toolkit:cordova-serve",
          "options": {
            "cordovaBuildTarget": "app:ionic-cordova-build",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "production": {
              "cordovaBuildTarget": "app:ionic-cordova-build:production",
              "devServerTarget": "app:serve:production"
            }
          }
        }
      }
    },
    "app-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "ci": {
              "devServerTarget": "app:serve:ci"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": ["**/node_modules/**"]
          }
        }
      }
    }
  },
  "cli": {
    "defaultCollection": "@ionic/angular-toolkit"
  },
  "schematics": {
    "@ionic/angular-toolkit:component": {
      "styleext": "scss"
    },
    "@ionic/angular-toolkit:page": {
      "styleext": "scss"
    }
  }
}

Any further information why i am having this issue?