Ionic 4 tabs page - Lazy Loading


#1

Hi,
I am following the Ionic Conference App and creating a similar Tab based Applicatoin. I see that the Tab pages are eagerly loaded rather than lazy loaded with following code (from ionic-conference-app)

import { AboutPage } from '../about/about';
import { MapPage } from '../map/map';
import { SchedulePage } from '../schedule/schedule';
import { SessionDetailPage } from '../session-detail/session-detail';
import { SpeakerDetailPage } from '../speaker-detail/speaker-detail';
import { SpeakerListPage } from '../speaker-list/speaker-list';

const routes: Routes = [
{
    path: 'tabs',
    component: TabsPage,
    children: [
      // tab one
      {
        path: 'schedule',
        component: SchedulePage,
        outlet: 'schedule'
      },
      {
        path: 'details/:sessionId',
        component: SessionDetailPage,
        outlet: 'schedule'
      },

When I replace component with loadChildren

      {
        path: 'schedule',
        //component: SchedulePage,
        loadChildren: '../schedule/schedule.module#ScheduleModule',
        outlet: 'schedule'
      },

The page is loading, but the whole component moves to the bottom as shown in the Pic:

I inspected the code and found there is an extra <router-outlet>, before <page-schedule>. Not sure if that should appear there.

Any hints?


#2

I don’t have a solution for you, but I can confirm that the same thing happens in my app when I try to lazy load the children pages

EDIT: I still don’t have a real solution to this, but here’s a hint for anyone that knows this better than I do:
I’m using Chrome, and what is happening is the <page-whatever> tag is the height of only the toolbar and footer… it doesn’t have enough height for the content… setting it in Chrome in the element style to min-height: -webkit-fill-available; pushes the toolbar to the top, but the content still doesn’t show until you add the same css to the <ion-content element…

Obviously, this is not a real fix, but it does enable you to show your page the way it should look (in Chrome at least)… I’m sure it’s a bug, but I still have to figure out what the correct way to do this is without breaking stuff when the bug is fixed


#3

Is there any update on this issue. I have same issue in my app.


#4

Created an example of an Ionic 4 project with lazy loaded tabs:


#5

I see the same thing as described here, don’t think this has been fixed yet.


#6

Here is your loading diagram:

Hate to say, but the tabs are not lazy loaded @texasman03


#7

Yeah i realized that after posting, should have removed. Also the animations and back button are broken, still an issue unfortunately :frowning:


#8

Since it does not seem to be fixed in the latest release either I thought I’d share the fix I used.

In global.scss I added

ion-content {
    height: 100vh !important;
}

Seems to work so far and it displays fine with all pages I have tested. Since I have no capacity to verify this Ill leave that to you.


#9

I tried your solution. However, now I’ve the issue that my content is hidden behind the tab footer bar…


#10

Even after npm install @ionic/angular@4.0.0-beta.15 --save I am also still having the issue of a lazy loaded child route page being pushed all the way to the bottom. blackfan23’s solution seems to work as a fix.


#11

Hi ! Did you guys find a solution ? Because I am also trying to deal with it, but all the related issues had been closed, and the problem remains. What shall I do ?


#12

I actually had the same issue while trying to lazy load tabs and just figured I didn’t understand something about lazy loading…I was so confused by the content suddenly showing up at the bottom of the page, so weird :face_with_raised_eyebrow:

I then quickly reverted back to eagerly loaded tabs…


#13

you can track this issue from here https://github.com/ionic-team/ionic/issues/16619


#14

Sorry, but I’m seeing closed as label there.


#15

Hi! There are simply too many things to load at once, to make an eager load. But looking and trying things, I’ve found out this workaround:

app-main {
  .ion-page {
    display: block;
  }
}

It worked just fine, till now. The problem is that I can’t use Modal very well. Some part of them are hidden.


#16

Thanks for your tip. Have you tried to check if your tabs are really lazy loaded using the augury chrome extension?

I tried, and I’m still getting the same picture as @_oliver posted above. It just says “EmptyOutletComponent” which routes to my page, but [Lazy] is nowhere to be seen…


#17

I didn’t try, but I used the layers and saw the hidden component. Maybe there’s something different within version.
But since I used that workaround, all is working, so I’l first use that, before the next version of ionic is released.


#18

Beta 18 is released and this issue has been taken care of, see this post: