Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Framework Delegate is Missing Zone <root> (ion-nav root component not showing in browser) #456

Open
Simbaclaws opened this issue Oct 26, 2020 · 2 comments

Comments

@Simbaclaws
Copy link

Simbaclaws commented Oct 26, 2020

Hi there,

I'm using ionic 5 and I'm trying to use the ion-super-tabs component.
The following html is what I'm using for the ion-super-tabs:

<super-tabs [config]="tabOpties">
  <super-tabs-toolbar slot="top" color="primary">
    <super-tab-button>
      <ion-icon name="chatbox"></ion-icon>
      <ion-label>Nieuws</ion-label>
    </super-tab-button>
    <super-tab-button #twitterTab>
      <ion-icon name="logo-twitter"></ion-icon>
      <ion-label>Twitter</ion-label>
    </super-tab-button>
    <super-tab-button #facebookTab>
      <ion-icon name="logo-facebook"></ion-icon>
      <ion-label>Facebook</ion-label>
    </super-tab-button>
  </super-tabs-toolbar>

  <super-tabs-container>
    <super-tab>
      <ion-nav [root]="nieuws" #nieuwsNav></ion-nav>
    </super-tab>
    <super-tab #twitterPagina>
      <ion-nav [root]="twitter" #twitterNav></ion-nav>
    </super-tab>
    <super-tab #facebookPagina>
      <ion-nav [root]="facebook" #facebookNav></ion-nav>
    </super-tab>
  </super-tabs-container>
</super-tabs>

This seems to render the pages on a mobile device (native android), but not inside of the web browser (chrome and safari).
I'm setting the variables nieuws, twitter and facebook to the corresponding pages imported in the ts file like so:

import { FacebookPage } from './facebook/facebook.page';
import { TwitterPage } from './twitter/twitter.page';
import { NieuwsPage } from './nieuws/nieuws.page';
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
@Component({
  selector: 'app-berichten',
  templateUrl: './berichten.page.html',
  styleUrls: ['./berichten.page.scss'],
})
export class BerichtenPage implements OnInit {
  nieuws = NieuwsPage;
  twitter = TwitterPage;
  facebook = FacebookPage;
  tabOpties = {
    sideMenu: 'left',
    allowElementScroll: true,
    debug: true
  };
  constructor(
    private weergave: WeergaveService
  ) { }

  ngOnInit() {

  }
}

The error message I'm getting in the console is as followed:

zone.js:690 Unhandled Promise rejection: framework delegate is missing ; Zone: <root> ; Task: Promise.then ; Value: Error: framework delegate is missing

Am I missing something here?
I have SuperTabsModule imported in both my berichten.module.ts and in app.module.ts where in app.module.ts I set the imports to SuperTabsModule.forRoot() and in berichten.module.ts I just have SuperTabsModule imported.

@Simbaclaws
Copy link
Author

Hmmm apparently this console message only appears when running in development mode.
When I do ionic serve --prod, the pages are displayed and the console message is gone.

I would like to find a solution for this, but for now I'll run with --prod mode on a local machine to do tests.

@marfrede
Copy link

I get the same error now and then with ionic@6

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants