[Solved ]Ionic lazy loading - invalid link : TabsPage

Ionic Framework ionic-v3
1

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”;

@NgModule({
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
2

In TabsPage.ts :
add this:

@IonicPage(
{
  name: 'tabs-page'
}
)

In app.components.ts

rootPage: string = 'tabs-page';

Please try it!

11 Likes
3

No, same error…

4

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

thx very much!

5

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

6

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

7

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

8

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

9

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

10

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

11

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

12

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

13

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

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

@IonicPage(
{
name: ‘tabs-page’
}
)

14

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

image
tab1.PNG861×650 89.9 KB

15

Please post your Ionic version specs.

16

This my error when apply your solution
Runtime Error
Uncaught (in promise): invalid link: tabs-page
Stack
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

17

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
18

I don’t believe this.

19

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.

20

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