bug: Application not work property on production mode

[mzawodzinski]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

If code is running in dev live mode ionic capacitor run android -l --external work correctly - modal is showing
But in production mode ionic capacitor run android / ionic capacitor build android --prod modal is not showing
In console is only

Example code

import { Component, OnInit } from '@angular/core';
import { IonicModule } from '@ionic/angular';

@Component({
  standalone: true,
  selector: 'app-test',
  template: '<div><h1>Hello Modal!</h1></div>',
  imports: [IonicModule]
})
export class TestPage implements OnInit { 
  constructor() {
    console.log('TestPage constructor called');
  }

  ngOnInit() {
    console.log('TestPage ngOnInit called');
  }
}
---
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonicModule,TestPage],
})
export class HomePage {
  constructor(
    private modalCtrl: ModalController,

  ) { }
  async test() {
    console.log(this.modalCtrl);
    console.log('start');
    try {
      const modal = await this.modalCtrl.create({
        component: TestPage,   

    
      });      
      console.log('Modal object after creation (if await works):', modal);
      await modal.present();
      console.log('Modal presented!');
    } catch (error) {
      console.error('Error creating or presenting modal:', error);
    }
  }
}
----
<ion-button (click)="test()">test</ion-button>

Expected Behavior

Code should work on this samo way in production mode and live mode

Steps to Reproduce

1. cerate new blank angular type application
2. add capacitor android
3. add new page
4. Create and present ModalController with component from step 3
5. run android capacitor in "not live mode"

Code Reproduction URL

https://github.com/mzawodzinski/ionicIssue

Ionic Info

[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module
'@capacitor/ios/package.json'

   Require stack:
   - /usr/local/lib/node_modules/@ionic/cli/lib/project/index.js
   - /usr/local/lib/node_modules/@ionic/cli/lib/index.js
   - /usr/local/lib/node_modules/@ionic/cli/index.js
   - /usr/local/lib/node_modules/@ionic/cli/bin/ionic

Ionic:

Ionic CLI : 7.2.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 8.5.7
@angular-devkit/build-angular : 19.2.13
@angular-devkit/schematics : 19.2.13
@angular/cli : 19.2.13
@ionic/angular-toolkit : 12.2.0

Capacitor:

Capacitor CLI : 7.2.0
@capacitor/android : 7.2.0
@capacitor/core : 7.2.0
@capacitor/ios : not installed

Utility:

cordova-res : not installed globally
native-run : 2.0.1

System:

NodeJS : v20.19.0 (/usr/bin/node)
npm : 11.4.1
OS : Linux 6.9

Additional Information

No response

[hilderney]

I suspected that the compiled production code was not working correctly. I solved by setting the scripts optimization to false on angular.json:

...
"architect": {
  "build": {
    "options": {
        ...
        "optimization": {
          "scripts": false,
          "styles": {
            "minify": true,
            "inlineCritical": true
          },
          "fonts": true
        }
     }
  }
}

[mzawodzinski]

After the first quick test, look better that great.
It fixes not only this problem but also others, for example progress bar now works.

I will do more tests and come back with information whether everything works.

[tvunguyen-aeins]

@mzawodzinski You are using an angular standalone component, as its been made the default recently. This means that you cannot import "IonicModule" anymore, so please try importing the Ionic components individually like this:

import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton } from '@ionic/angular/standalone';
It is very important that the import uses "/standalone". After that you can turn on the script optimization again.

Further reading: https://ionicframework.com/docs/angular/build-options#usage-with-standalone-based-applications

[sean-perkins]

You may import either the IonicModule or the standalone components from @ionic/angular/standalone when using Angular standalone components. You cannot mix the usages. Either use only the IonicModule with the lazy loaded Ionic components or the @ionic/angular/standalone for the treeshakeable Ionic custom elements.

Ionic's standalone components will be a more performant decision in almost every use case, unless you do not know what components you are rendering until runtime; then the lazy loaded components should be used.