search

ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.08k stars 13.51k forks source link

Ionic v4 - Tabs are not Lazy Loading Children #14566

Closed dmastag closed 5 years ago

dmastag commented 6 years ago

Support Question

I noticed that on the Tab Starter that the children of the tabs module and tabs router are not lazy loaded.

https://github.com/ionic-team/starters/blob/master/angular/official/tabs/src/app/pages/tabs/tabs.module.ts

https://github.com/ionic-team/starters/blob/master/angular/official/tabs/src/app/pages/tabs/tabs.router.module.ts

Would this not be a performance Drag when I create a huge Tab based App? Since all my modules will have to be loaded in that Tab Module?

ostno commented 6 years ago

You can configure lazy loading for tabs, create a tabs.routing.module file and import it to tabs.module

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { TabsPage } from './tabs.page';

const routes: Routes = [
    {
        path: 'tabs',
        component: TabsPage,
        children: [
            {
                path: 'home',
                outlet: 'home',
                loadChildren: '../home/home.module#HomePageModule'
            },
            {
                path: 'about',
                outlet: 'about',
                loadChildren: '../about/about.module#AboutPageModule'
            }
        ]
    },
    {
        path: '',
        redirectTo: '/tabs/(home:home)',
        pathMatch: 'full'
    }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class TabsPageRoutingModule {}
mhartington commented 6 years ago

This is something we're currently waiting for Angular to fix here

https://github.com/angular/angular/issues/10981

After this is merged in, tabs we be able to be fully lazy loaded.

GuilhermeBCC commented 6 years ago

It would not be better to use an ion-segment with router-outlet?

<ion-content>
   <router-outlet></router-outlet>
</ion-content>

<ion-footer>
   <ion-segment>
      <ion-segment-button routerLink="home">Home</ion-segment-button>
      <ion-segment-button routerLink="about">About</ion-segment-button>
   </ion-segment>
</ion-footer>
dmastag commented 6 years ago

@GuilhermeBCC I believe not As you won't be able to lazy load a whole application that way and therefor bigger applications that are build around tabs will then load quite longer

pavillet commented 6 years ago

The angular issue has been fixed, or is supposed to be ;)

dmastag commented 6 years ago

Yeahh, so just wait until its released in Angular and try to update my ionic v4 app

TomDemulierChevret commented 6 years ago

Angular 6.1.0-beta.1 contains their fix but isn't enough to fix the issue. I tried it and there is a style issue that prevent the page from rendering correctly :

The empty ng-component inserted by Angular receive the ion-page class instead of the real page.

mhartington commented 6 years ago

The fix from angular is an internal fix at the moment. I'll be working with them to see what can be done to fix this.

jing-zhou commented 6 years ago

this problem still persists on ionic v4.0.0-beta.1 and angular 6.1.1

wjz@bj:~/ion/sarva$ ionic info

Ionic:

   ionic (Ionic CLI)          : 4.0.5 (/home/wjz/.nvm/versions/node/v10.7.0/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.1
   @angular-devkit/core       : 0.7.2
   @angular-devkit/schematics : 0.7.2
   @angular/cli               : 6.1.2
   @ionic/ng-toolkit          : 1.0.0
   @ionic/schematics-angular  : 1.0.1

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0

System:

   Android SDK Tools : 26.1.1
   NodeJS            : v10.7.0 (/home/wjz/.nvm/versions/node/v10.7.0/bin/node)
   npm               : 6.2.0
   OS                : Linux 4.4

Environment:

   ANDROID_HOME : /home/wjz/Android/Sdk
   HTTP_PROXY   : http://127.0.0.1:42266/
   http_proxy   : http://127.0.0.1:42266/
   HTTPS_PROXY  : http://127.0.0.1:42266/
   https_proxy  : http://127.0.0.1:42266/

package.json excerpt:

"dependencies": {
    "@angular/common": "6.1.1",
    "@angular/core": "6.1.1",
    "@angular/forms": "6.1.1",
    "@angular/http": "6.1.1",
    "@angular/platform-browser": "6.1.1",
    "@angular/platform-browser-dynamic": "6.1.1",
    "@angular/router": "6.1.1",
    "@ionic-native/core": "5.0.0-beta.14",
    "@ionic-native/device": "5.0.0-beta.14",
    "@ionic-native/globalization": "5.0.0-beta.14",
    "@ionic-native/photo-library": "5.0.0-beta.14",
    "@ionic-native/splash-screen": "5.0.0-beta.14",
    "@ionic-native/status-bar": "5.0.0-beta.14",
    "@ionic/angular": "4.0.0-beta.1",
    "@ionic/ng-toolkit": "1.0.0",
    "@ionic/schematics-angular": "1.0.1",
    "@ionic/storage": "^2.1.3",
    "@ngx-translate/core": "10.0.2",
    "@ngx-translate/http-loader": "3.0.1",
    "base64-js": "^1.3.0",
    "cldr-tools": "^0.1.0",
    "client-oauth2": "^4.2.1",
    "cordova-android": "7.0.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-file": "^5.0.0",
    "cordova-plugin-globalization": "^1.11.0",
    "cordova-plugin-ionic-keyboard": "^2.1.2",
    "cordova-plugin-ionic-webview": "^2.0.2",
    "cordova-plugin-photo-library": "^2.1.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-sqlite-storage": "^2.3.3",
    "core-js": "^2.5.3",
    "fbsj": "^1.0.53",
    "flatbuffers": "^1.9.0",
    "http-string-parser": "0.0.6",
    "moment": "^2.22.2",
    "rxjs": "6.2.2",
    "serialize-javascript": "^1.5.0",
    "text-encoding": "^0.6.4",
    "uuid": "^3.3.2",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/cli": "6.1.2",
    "@angular/compiler": "6.1.1",
    "@angular/compiler-cli": "6.1.1",
    "@angular/language-service": "6.1.1",
    "@angular-devkit/architect": "0.7.2",
    "@angular-devkit/build-angular": "0.7.2",
    "@angular-devkit/core": "0.7.2",
    "@angular-devkit/schematics": "0.7.2",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~10.5.2",
    "codelyzer": "~4.4.2",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.2",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~2.7.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-device": {},
      "cordova-plugin-globalization": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-splashscreen": {},
      "cordova-sqlite-storage": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-photo-library": {
        "PHOTO_LIBRARY_USAGE_DESCRIPTION": "To choose photos"
      }
    },
    "platforms": [
      "android"
    ]
  }
}
cvaliere commented 6 years ago

@mhartington sorry to ping you like this, but any news on this? clearly an important feature that has been lost in migration

bleuscyther commented 6 years ago

Yeah still an issue

grrcode commented 6 years ago

It doesnt work with Angular 6.1.2.

mhartington commented 6 years ago

Hey folks. Yes, we're aware this is still an issue. We're looking into what we can do as currently the fix for this in Angular was not publicly exposed to other components. Will updated when we have more info

daem0ndev commented 6 years ago

@mhartington in the mean time do you know of a way we can use the ion-tabbar directly. We want to implement the tab bar of buttons but without using the multiple outlets/page tabs. We simply want to have the look and feel of tabs but just use a single ion-router-outlet for the content area, this would allow us to continue our migration efforts of our large ionic app without having to wait for lazy loading to work with ion-tabs. I tried using with useRouter="false" but it still creates the ion-tab page element that covers the whole screen. ion-tabbar is also not exposed but it would be nice to just get a tab bar that is a "dumb" ui component that allows the developers to just get the look and feel and implement our own (click)/(ionSelect) handlers and what not.

grrcode commented 6 years ago

@daem0ndev , why dont you use the side menu for the time being.. and when it's fixed, just switch to the tabs..

daem0ndev commented 6 years ago

@GRRook because we also have a side menu! also for early beta testing and UX usability tests, having the tab bar is helpful as the final product would have it. I was able to work past it by just making my own tab bar look alike that is essentially more of a shortcut bar to certain important routes/destinations of the app. it does not maintain a stack per tab or anything, just navigates forward based on the tab that is tapped.

sudiptosen commented 6 years ago

In the ionic tabs template if I change the app-routing.module to the following, i see that it fails every other refresh. Error is: Cannot match any routes. URL segment: 'tabs'

const routes: Routes = [ { path: '', redirectTo: '/tabs', pathMatch: 'full' }, { path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' } ];

I want to name the tabs route, so I can use it somewhere like: router.nagivate(['tabs'])

navigate just errors out saying: Cannot match any routes. URL segment: 'tabs'

Please help/confirm if this is related to Lazy Loading issue here.

Appreciate it.

mhartington commented 6 years ago

Going to keep this issue locked for a bit, as most of the posts here are better suited for the Ionic forum. Please direct questions there.

This issue will stay open in order to track lazy loading tabs for now.

paulstelzer commented 5 years ago

I close this issue here because @manucorporat opened a new issue to track the process here -> #16619 - Please follow there for new information about lazy loading tabs