[Solved ]Ionic lazy loading - invalid link : TabsPage

Hi, I try to use ionic3 lazyloading feature.

But I’m getting following error: Uncaugth (in promise): invalid link: TabsPage.

My Tabspage has a module class “tabs.module.ts” which looks fine.

import {NgModule} from “@angular/core”;
import {TabsPage} from “./tabs”;
import {IonicPageModule} from “ionic-angular”;

declarations: [TabsPage,],
imports: [IonicPageModule.forChild(TabsPage),],
exports: [TabsPage,]

export class TabsPageModule {

and in app.components.ts the link looks like

rootPage : string = “TabsPage”;

May somebody can help me?

1 Like

In TabsPage.ts :
add this:

  name: 'tabs-page'

In app.components.ts

rootPage: string = 'tabs-page';

Please try it!


No, same error…

Ah, sorry! It worked, I added @IonicPage to a wrong place.

thx very much!

Do u then lazy load all tab inner pages too or not?

Right now not, but I will change it asap.
Why? Do you experience problems doing so?

i gave it a quick try, didnt work, maybe needed caffeine to kick in. will try again today.

I will give it a try this weekend, if I succeed I will let you know.

I don’t see the benefit in changing the name of @IonicPage.

It works fine, i just tested it. Put tab page names on quotes.

Yes, I tried it myself, it works just fine.

im too going to try this, but where did u get this solution from, docs ?

From here: https://www.youtube.com/watch?v=7j-P-ElAqe8

And I had to use following annotation for each page, thx to johnny5015

name: ‘tabs-page’

but this didnt solve my problem, every time this error occurs, i have to rerun ionic serve to get rid of this

Please post your Ionic version specs.

This my error when apply your solution
Runtime Error
Uncaught (in promise): invalid link: tabs-page
Error: Uncaught (in promise): invalid link: tabs-page
at c (http://localhost:8100/build/polyfills.js:3:13535)
at Object.reject (http://localhost:8100/build/polyfills.js:3:12891)
at NavControllerBase._fireError (http://localhost:8100/build/vendor.js:43003:16)
at NavControllerBase._failed (http://localhost:8100/build/vendor.js:42991:14)
at http://localhost:8100/build/vendor.js:43046:59
at t.invoke (http://localhost:8100/build/polyfills.js:3:9283)
at Object.onInvoke (http://localhost:8100/build/vendor.js:4508:37)
at t.invoke (http://localhost:8100/build/polyfills.js:3:9223)
at r.run (http://localhost:8100/build/polyfills.js:3:4452)
at http://localhost:8100/build/polyfills.js:3:14076
Ionic Framework: 3.5.3
Ionic App Scripts: 2.0.2
Angular Core: 4.1.3
Angular Compiler CLI: 4.1.3
Node: 6.10.3
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36

I spent a lot of times on this to realise the file names are very important !! If you have a page with name app.ts, you need a module named app.module.ts or it won’t work! so nasty

1 Like

I don’t believe this.

This is not an uncommon thing amongst frameworks. It’s a “convention over configuration” approach. Problem is that some frameworks (looking at you, Angular) mix the two, so you never know what to expect in a given scenario.

Someone can explain me why this is necesary? why we have to specify a name and the default ‘TabsName’ is not working?