ionic-super-tabs icon indicating copy to clipboard operation
ionic-super-tabs copied to clipboard

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

Open Simbaclaws opened this issue 4 years ago • 2 comments

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 avatar Oct 26 '20 14:10 Simbaclaws

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.

Simbaclaws avatar Oct 28 '20 13:10 Simbaclaws

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

marfrede avatar Jan 28 '22 08:01 marfrede