App working with Live Reload but not working with Android Studio or xcode

Ionic Framework Ionic Angular
1

I have an Ionic/Angular app in standalone mode that works perfectly while I test it in live-reload mode with ionic cap run android -l --external. However, when I run it directly from Android Studio or Xcode, or compile it for upload to the marketplaces, everything stops working. Ionic components like buttons only display text, no onclick events work, and stylesheets seem to have no effect. Previous versions of the app that were not in standalone mode worked without any issues. Does anyone have any clue?

With live reload

login-ok-up
login-ok-up720×1230 17.7 KB

directly from Android Studio or Xcode

login-ko-up
login-ko-up720×1230 19.3 KB

Ionic:

   Ionic CLI                     : 7.2.0 (/Users/apps/.nvm/versions/node/v20.11.1/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 8.4.0
   @angular-devkit/build-angular : 18.2.11
   @angular-devkit/schematics    : 18.2.11
   @angular/cli                  : 18.2.11
   @ionic/angular-toolkit        : 12.1.1

Capacitor:

   Capacitor CLI      : 6.1.2
   @capacitor/android : 6.1.2
   @capacitor/core    : 6.1.2
   @capacitor/ios     : 6.1.2

angular.json
"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "www",
      "index": "src/index.html",
      "main": "src/main.ts",
      "polyfills": "src/polyfills.ts",
      "tsConfig": "tsconfig.app.json",
      "inlineStyleLanguage": "scss",
      ........
2

Make sure you are importing Ionic components from @ionic/angular/standalone and not @ionic/angular.

3

As you said I’ve found some components without the standalone import. I changed them and also changed to standalone all this: IonicRouteStrategy, IonRouterOutlet, Platform, Animation, AnimationController, AlertController, ModalController, ToastController and MenuController. IonItemSliding has no standalone mode. But it’s not working. Is it necessary to set any of these elements to standalone mode? Thanks.

4

I’m not sure unfortunately. If you can share some code and explain a little more of what is not working, maybe someone else familiar with Angular can help.

5

The app is a port of another Angular version that used modules. From what I’m seeing, I think in these cases it’s better to start from scratch in standalone mode than to adapt the previous files and configurations created with modules. Thank you so much for giving me the tip.

6

You could also review the Starter project and make sure things are configured correctly for Ionic Angular Standalone - starters/angular-standalone/base at main · ionic-team/starters · GitHub