Ionic-framework: ionic 3, lazy-loading tabs components

[amrayoub]

I'm trying to create a ionic 3 tabs app with lazy loading without importing the components .

in my app.component.ts

 rootPage:string = "Tabs";

in tabs.html

<ion-tabs>
<ion-tab [root]="Favorites" tabTitle="fav" tabIcon="star"></ion-tab>
<ion-tab [root]="libaray" tabTitle="Library" tabIcon="book"></ion-tab>
</ion-tabs>

in Favorites.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { Favorites } from './favorites';

@NgModule({
  declarations: [
    Favorites,
  ],
  imports: [
    IonicPageModule.forChild(Favorites),
  ],
  exports: [
    Favorites
  ]
})
export class FavoritesModule {}

so far , the tabs page loads successfully but no view (blank page) .
i think the problem that i'm using [root] attribute with lazy loading !
how to fix that ?

Ionic Framework: 3.0.1
Ionic App Scripts: 1.3.0
Angular Core: 4.0.0
Angular Compiler CLI: 4.0.0
Node: 7.7.3
OS Platform: Linux 4.4
Navigator Platform: Linux x86_64

Thanks

[davidqqq]

Did you get any error?

[amrayoub]

fixed by declare the names of the componets , without importing them.
in Tabs.ts

Favorites:any='Favorites';
libaray:any = 'libaray';

[aneurysmjs]

@amrayoub thank you a lot!!!!! yeah, it works without importing it.

amazing!!!!! I'm so happy

[tmnuwan12]

Do we have to add the @IonicPage annotation into Favorites & libaray?

[kensodemann]

@tmnuwan12 - I am not sure I fully understand your question, but I believe the answer is yes. If you are going to use lazy loading, you should use it throughout the app, which means each page should have the IonicPage decorator and should be properly defined in its own module.

[prteekagni]

ERROR Error: Uncaught (in promise): invalid link: Tabs
at c (polyfills.js:3)
at Object.reject (polyfills.js:3)
at NavControllerBase._fireError (nav-controller-base.js:223)
at NavControllerBase._failed (nav-controller-base.js:216)
at nav-controller-base.js:263
at t.invoke (polyfills.js:3)
at Object.onInvoke (core.js:4760)
at t.invoke (polyfills.js:3)
at r.run (polyfills.js:3)
at polyfills.js:3

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