Ionic 3 page reference in app.component

Ionic Framework ionic-v3
1

I have recently upgraded to ionic 3 implementing the IonicPageModule for navigation. The push and setRoot works for all navigating however i am stuck at the trying to reference the pages in the app.component.ts

Normally i would reference the page from the import like so

this.rootPage = user ? ProgramsPage : LoginPage;
Where LoginPage and ProgramPage are declared in the app.module.ts

However in the new angular 4 / ionic 3 setup references to the “pages” are referenced with strings without an import in the related page.ts and seemly integrated with the navCtrl’s push and set

I have tried

import { LoginPageModule } from '../pages/login/login.module';
But that does not make sense.

I figured the whole point of creating modules per page was to firstly enalble lazy loading but also minimize the import code on pages without having to create a config export class.

And the thing is you cannot declare the LoginPage twice and seeing as though it is already declared as a module through the IonicPageModule one cannot add that export class again.

So just wondering how do you reference a ionic 3 page component when you want to apply logic?

EDIT

Just thought i would note that the generated templates for sidemenu and tabs still uses the “old way” without creating modules for the page components, yet if you generate a page with ionic g page foobar you get the new module based page component.

1 Like
2

I can’t make any sense out of “minimize the import code on pages without having to create a config export class”, so can’t address that, but:

As a string containing the name of the class.

3

so generally you do a simple page component import

import { Foo1Page } from ‘…/pages/foo1/foo1’;

now say you have ten pages you would need to

import { Foo1Page } from ‘…/pages/foo1/foo1’;
import { Foo2Page } from ‘…/pages/foo2/foo2’;
import { Foo3Page } from ‘…/pages/foo3/foo3’;
…
import { Foo10Page } from ‘…/pages/foo10/foo10’;

so one would create a config class with an import

import { Foo1Page,Foo2Page } from ‘…/config/config.pages’;
and then you can just reference the export

if (userRole === 1) {
Foo1Page
}else{
Foo2Page
}

But now that it is a string and there is no import how can you reference the page module when you apply conditional logic on it?

4

My IDE manages imports for me, so I don’t really concern myself with how many of them there are.

5

what?!

ok so your IDE manages imports … ok fine. I was just trying you make you understand the issue i am having which still occurs regardless of amazing IDE xyz

“I can’t make any sense out of…”

6

Look, the fundamental thing you asked was “how do you reference a ionic 3 page component?” and the answer is “as a string containing the name of the class”.

7

Right , so no that was not the fundamental thing that i asked, rather is it how can i handle a reference in the app.component.ts file ot a page module and apply conditional logic, because you cannot reference the page module as a sting in that file, but thanks anyway

8

I don’t know where you got that impression, but it’s false. You can and I have.

9

ok can you give an example ? I have tried and it does not work.

10 
rootPage: string;

f(user: User): void {
  this.rootPage = user ? 'ProgramsPage' : 'LoginPage';
}

Obviously this assumes you have actually bought into the lazy page loading. Rereading your initial post, you say both “implementing the IonicPageModule for navigation” and “LoginPage and ProgramPage are declared in the app.module.ts”, which seems to be a contradiction. If you are declaring pages in your app module, instead of in their own @IonicPageModule, then navigating by strings won’t work and you need to keep importing their class and using that. If you are actually using IonicPageModule for navigation, assigning strings works.

11

And you have tried this code? and it works?

12

Well obviously not that exact code because I don’t have pages with the same names as yours, but the fundamental idiom of:

<ion-nav [root]="rootPage">

backed by strings in rootPage, yes. I’m not currently using it now, though, because I have decided against buying into lazy page loading for now for reasons everybody is probably sick of hearing.