Ionic 4 tabs page - Lazy Loading

Ionic Framework
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:

conf
conf.png1296Ă—644 26.5 KB

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

outlet
outlet.png443Ă—601 62.4 KB

Any hints?

1 Like
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:

image
image.png786Ă—151 8.04 KB

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.

2 Likes
9

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

1 Like
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

1 Like
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:

19

Demo (with two different approaches) + Explanation:

With 4.0.0-beta.18 ion-tab was removed and it’s not necessary to use named outlets.

Ionic CLI version 4.10.3
Ionic Framework @ionic/angular 4.0.1

20

I got page not found when I click on the link you provided