Ionic-framework: the <ion-tabs> element disappear when i use lazy loading.

[CristianG540]

Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x ] 3.x
[ ] 4.x

I'm submitting a ... (check one with "x")
[x ] bug report
[ ] feature request

Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
I have a simple application with 3 tabs, two of the tabs are loaded without "lazy loading", and one of them uses "lazy loading", when I navigate to the tab that uses "lazy loading" and I reload the application, the element " "disappears.

Steps to reproduce:

Related code:

lazyPage

import { Component } from '@angular/core';
import { NavController, NavParams, IonicPage } from 'ionic-angular';

/**
 * Generated class for the LazyPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
@IonicPage()
@Component({
  selector: 'page-lazy',
  templateUrl: 'lazy.html',
})
export class LazyPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LazyPage');
  }

}

BibliotecaPage

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

import { FrasesPage } from '../frases/frases';
import { Frase } from '../../data/frase.interface';
import frases from '../../data/frases';

@Component({
  selector: 'page-biblioteca',
  templateUrl: 'biblioteca.html',
})
export class BibliotecaPage {

  private frasesPage = FrasesPage;
  private frasesCollection: { category: string, quotes: Frase[], icon: string }[];

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams
  ) {
    this.frasesCollection = frases;
  }

}

TabsPage

import { Component } from '@angular/core';

import { FavoritosPage } from '../favoritos/favoritos';
import { BibliotecaPage } from '../biblioteca/biblioteca';

@Component({
  templateUrl: 'tabs.html',
  selector: 'page-tabs'
})
export class TabsPage {
  private favoritosRoot: any = FavoritosPage;
  private bibliotecaRoot: any = BibliotecaPage;
  private lazyRoot: any = "LazyPage";
}

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages: (c:\Users\user\Documents\Visual Studio 2017\Projects\IonicApp2\2.UdemyIonicFrasesFav\node_modules)

    @ionic/cli-utils  : 1.18.0
    ionic (Ionic CLI) : 3.18.0

local packages:

    @ionic/app-scripts : 3.1.0
    Ionic Framework    : ionic-angular 3.9.0

System:

    Node : v6.11.0
    npm  : 4.2.0
    OS   : Windows 10

Misc:

    backend : pro

[kensodemann]

Hello! Thank you for opening an issue with us! Would you be able to provide a sample application via GitHub that demonstrates the issue you are having? Thanks for using Ionic!

[CristianG540]

I tried to create an example in "stackblitz", but when I tried to use lazy loading the example failed, I think the "lazy loading" does not work correctly. https://stackblitz.com/edit/ionic-dxo3yb

[smallg]

@CristianG540 how about this issue?

[CristianG540]

i don't know, they never answered me, until today the issue persist

[kensodemann]

@CristianG540 - must have gotten lost in the shuffle as we are all concentrating on trying to get v4 out right now. Sorry about that.

Your StackBlitz link above just gives me a GitHub 404 error. Maybe it is formatted wrong in the markdown of your comment? Can you get me the correct link and I will have a look at it?

Is your project itself online? That would be another option.

[CristianG540]

@kensodemann :3 don't worry and yes the link is broken but now it works :D

[smallg]

@CristianG540 it works? how to fix it?

[CristianG540]

@smallg oh sorry it´s a misunderstanding,the issue persist, i mean that the avobe link now works

[kensodemann]

@CristianG540 - It appears that you are just trying to lazy load part of the app. We suggest that any application use a consistent navigation strategy throughout the app, so in your case you should use lazy load throughout, otherwise the navigation system is going to get messed up. Here is an example where the full app is lazy loaded:

https://github.com/kensodemann/lazy-load-tabs/commit/d0757d2934d4cf939065ad9040879b32ff56643a

[webcraftniray]

Hi all,

I've having the same issue even though I'm loading all the pages in my app via LazyLoading.

When I load my app via the root page:

http://localhost:8100/#/

The URL reroutes to:

http://localhost:8100/#/home/home

the tabs work fine...

then when I reload the browser the URL reroutes to:

http://localhost:8100/#/home

and the tabs are gone...

It's only when I edit the url back to "http://localhost:8100/#/" that the tabs work again.

Note: This happens on the navigation before I've even developed anything... I simply changed the default tabs app, into LazyLoading:

`import { Component } from "@angular/core";

@Component({
templateUrl: "tabs.html"
})
export class TabsPage {
tab1Root = "HomePage";
tab2Root = "AboutPage";
tab3Root = "ContactPage";

constructor() {}
}
`

[acittar]

Hi kensodemann,

The github link you posted gives a 404. Can you please update it?
I cannot find a full and pretty complex lazy load app example around the web.

Thanks,
Alessandro

[kensodemann]

@webcraftniray - are you also lazy loading the tabs page? Can you post your code to a GitHub repo

@acittar - that repo is probably long gone since this is an old issue and I clean up my personal repos after a while.

[acittar]

Hi @kensodemann,

I have exactly the same problem of @webcraftniray, can you please check what's wrong in my github repo? https://github.com/acittar/ParkSharing

thanks,
Alessandro

[kensodemann]

@acittar - how do you run your app? It appears I need some sort of login credentials.

Looking at your code, however, it appears that the crux of your issue is this: https://github.com/ionic-team/ionic/issues/13394#issuecomment-351861003 Specifically, you are not lazy loading the tabs page.

I would like to test that, but I cannot without proper login credentials and instructions on running the application (I assume I have to run the stuff in the server folder as well, but cannot be sure due to lack of a README).

I have submitted a PR that shows making the tabs page lazy loaded, but it is mostly untested due to the above.

[acittar]

Great @kensodemann it works! Changing from
rootPage:any = TabsPage;
to
rootPage: String = 'TabsPage';
did the trick!

Thanks a lot!

[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.