ionic-framework: bug: [v7.5] angular standalone overlays do not load in production build

As a temporary workaround you can also do the following in app.component.ts for each controller you are using:

// if I were using the modalController, I would import from ion-modal
import { defineCustomElement } from '@ionic/core/components/ion-modal.js';

...

constructor() {
  // this registers the underlying Web Component and ensures it gets included in the final build
  defineCustomElement();
}

You’ll need to alias the import if you are using multiple controller. Something like the following should work:

import { defineCustomElement as defineModal } from '@ionic/core/components/ion-modal.js';
import { defineCustomElement as defineLoading } from '@ionic/core/components/ion-loading.js';

The benefit of this approach is you can still get an optimized build.

If you are using eslint, you can add the following rule to make sure you always import from standalone:

"@typescript-eslint/no-restricted-imports": [
  "error",
  {
    "paths": [
      {
        "name": "@ionic/angular",
        "message": "Please import Ionic standalone components instead: `import {IonButton} from '@ionic/angular/standalone'`.",
        "allowTypeImports": true
      }
    ]
  }
]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/28560, and a fix will be available in an upcoming release of Ionic Framework. Please feel free to continue testing the dev build, and let me know if you run into any issues.

Here’s a dev build with a proposed fix if anyone is interested in testing:

npm install @ionic/angular@7.5.6-dev.11700492285.1581ed02

    await loading.present();
    // 111 won't appear in the console due to the LoadingController issue
    console.log(111);

I confront the same issue that prevents my code from executing and causes me to spend a lot of time debugging. After much troubleshooting, I discovered the root of the problem was related to the LoadingController. Then, I found this related issue and found the workaround.

By the way, it’s crucial to confirm that you’re utilizing the @ionic/angular and @ionic/core versions—preferably 7.5.4 or the latest—to take advantage of the provided workaround. I encountered an issue with the loadingController, causing a black background consistently on @ionic/core version 7.5.2.

Moreover, I suggest including relevant keywords such as LoadingController, AlertController, ModalController, etc., in the issue title. This will make it more convenient for developers facing similar problems to identify and engage with the issue efficiently.

However, I worry this bug will affect more developers as they migrate to the angular standalone approach. I sincerely hope the Ioinic team can resolve this soon before it becomes a major blockade for the community.

Agreed, would love to have a permanent fix.

I’ve discovered that, as a temporary fix, you can add the following line to your angular.json file:

{
  "projects": {
    "app": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "buildOptimization": false,
              ...
            }
            ...
          }
          ...
        }
        ...
      }
      ...
    }
    ...
  }
  ...
}

This will turn off build optimization for production builds.

When this bug is fixed, please reverse this change!! ⚠️⚠️⚠️⚠️⚠️⚠️ This is a temporary and dangerous solution.

Thanks, I can reproduce this. The problem is that the controller isn’t defining the underlying component. When you run a production build (and therefore treeshake out unused code) the overlay components are removed from the build since they aren’t actually used.

We need to implement something similar to Vue and manually call defineCustomElement: https://github.com/ionic-team/ionic-framework/blob/068d0038602485085face4a443e473bf1d5cc227/packages/vue/src/controllers.ts#L41

I upgraded to @ionic/angular v7.5.6, released just a few hours ago, and the loading and toast controllers are working properly now in production. Nice job! Thank you.

I have the same issue with ModalController using angular 16 /w ionic 7, the modal works in dev but when adding the production flag nothing happens, the promise from this.modalController.create doesn’t do anything, no errors and the promise is never completed.

edit: is there any solution for now? I have to deploy a new version a app for my customer since is app cannot be download on the google play store until I’m able to release a new version.

hakimio

Thanks it works fine. I wasn’t importing from the standalone version.

@liamdebeasi any update on fixing this issue in the next bugfix release? The workaround you provided is working but it feels a bit hacky imho

Same issue here on a new project. During the setup wizard Ionic recommends using the new standalone approach as well.

"buildOptimizer": false,

Fixed with this for now. Hoping the Ionic team can fix this ASAP

Agreed, would love to have a permanent fix.

I’ve discovered that, as a temporary fix, you can add the following line to your angular.json file:

{
  "projects": {
    "app": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "buildOptimization": false,
              ...
            }
            ...
          }
          ...
        }
        ...
      }
      ...
    }
    ...
  }
  ...
}

This will turn off build optimization for production builds.

When this bug is fixed, please reverse this change!! ⚠️⚠️⚠️⚠️⚠️⚠️ This is a temporary and dangerous solution.

That’s a better solution than releasing with a debug build of the webview!