bug: Framework delegate is missing

[TobiasHesselinkTopicus]

Prerequisites

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

Ionic Framework Version

v7.x

Current Behavior

I have a package which is responsible for creating a Wizard. Within this package there are 2 main aspects:

WizardContainerComponent:

• This components has a ion-nav in HTML
• Has a @Input() rootPage: ComponentRef
• Has a @ViewChild(IonNav) public ionNav: IonNav
• Calls this.ionNav.setRoot(this.rootPage) on ngAfterViewInit

WizardService:

• Function which opens the wizard, this is done by the following code:

private readonly DEFAULT_MODAL_OPTIONS: ModalOptions = {
        component: NativeWizardContainerComponent,
        cssClass: 'ds-native-wizard'
    };

public openWizard(
        rootPage: ComponentRef,
    ): void {
        from(this.modalController.create({ ...this.DEFAULT_MODAL_OPTIONS, componentProps: { rootPage }}))
            .pipe(
                concatMap((modal) => from(modal.present())),
                take(1)
            )
            .subscribe();
    }

For the consumer application, we only have to call the openWizard function with a default Ionic Component, which is something like this:

<ion-content>
    some content here...
</ion-content>

The problem: Unfortunately, an error occurs: "framework delegate is missing" It is not clear, what is causing the error. Because, a while ago everything worked fine. But after updating some packages, the error appeared. I am still investigating since which package update this error occured. My guess it has something to do with an Angular or Ionic version.

The current versions of some packages are:

• angular: 17.3.3
• ionic/angular: 7.8.3 (also downgraded to 7.2.3 but also did not solve the issue)

Expected Behavior

A model opens with the passed through Component.

Steps to Reproduce

Create the 2 aspects which explained above:

• ContainerComponent
• Service (which calls the modalController.create)

Then somewhere, call the function of the service and pass through a Component.

Serve the application and trigger the function with a button. The modal opens, but you see a white page and an error in the console.

Code Reproduction URL

Will add later on

Ionic Info

Package which has the wizard container component and service Ionic:

Ionic CLI : 6.20.6

Utility:

cordova-res : not installed globally native-run (update available: 2.0.1) : 1.7.1

System:

NodeJS : v18.17.1 npm : 9.6.7 OS : macOS

Consumer application Ionic:

Ionic CLI : 6.20.6 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : not installed @angular-devkit/build-angular : 17.3.2 @angular-devkit/schematics : 17.3.2 @angular/cli : 17.3.2 @ionic/angular-toolkit : 10.1.1

Capacitor:

Capacitor CLI : 5.7.2 @capacitor/android : 5.7.2 @capacitor/core : 5.7.3 @capacitor/ios : 5.7.2

Utility:

cordova-res : not installed globally native-run (update available: 2.0.1) : 2.0.0

System:

NodeJS : v18.17.1 (/Users/topicus/.nvm/versions/node/v18.17.1/bin/node) npm : 9.6.7 OS : macOS

Additional Information

No response

[sean-perkins]

@TobiasHesselinkTopicus a minimal reproduction will be required for the team to debug what is occurring in your application.

This message is often printed when developers forget to import the IonNav component or import the IonicModule if using modules. The component wrappers that Ionic Framework offers assigns the delegate property on the web component instance: https://github.com/ionic-team/ionic-framework/blob/88db93819fc440c1ca85c980026cc758166d05d8/packages/angular/common/src/directives/navigation/nav.ts#L65

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[TobiasHesselinkTopicus]

@TobiasHesselinkTopicus a minimal reproduction will be required for the team to debug what is occurring in your application.

This message is often printed when developers forget to import the IonNav component or import the IonicModule if using modules. The component wrappers that Ionic Framework offers assigns the delegate property on the web component instance:

https://github.com/ionic-team/ionic-framework/blob/88db93819fc440c1ca85c980026cc758166d05d8/packages/angular/common/src/directives/navigation/nav.ts#L65

Thanks for your fast response. I understand. Unfortunately, we already imported the IonicModule within the package and in the consumer application. I will try and setup a repository which can reproduce the issue tomorrow.

[TobiasHesselinkTopicus]

I did and try to reproduce the issue within a fresh repository. Unfortunately I could not get the error i wanted to. I will try to point out the cause of the problem and open a new ticket if it's a bug within the Ionic framework. Thanks for the help!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.