IonicPage – Link to Pages with URL like a Pro

IonicPage allows you to link to pages of your Ionic app directly via URL links in the browser. Therefore, a link such as localhost:8100/#/auth-login when entered into the browser URL will take you directly to your Login Page, assuming your Deep Linking is right.

I personally had an interest in how this deep linking (IonicPage) thing worked, because many of my upcoming projects are all going to be Progressive Web Apps, and a way for Desktop users to move around seamlessly was a major concern for me.

IonicPage, Deep Linking, whatever you choose to call it, couldn’t have arrived at a better time!

The steps outlined in here will come in handy somewhere in your Angular project, since Ionic is a lot of Angular

If you’ve played with IonicPage with struggles before, one annoying that keeps popping up is, namely:

“X Page is part of the declarations of 2 modules” bla bla bla.

In this article, let’s fix the error together. It might seem like a mouth full of code, however, when you get the hang of it, you’ll order your next Koose (pronounced Ko-o-ose).

Our end results would look something like this (minus the UI whatever):

IonicPage Deep links example

Let’s be on the Same Page

Here are the steps I’ve taken so far. Your setup might be different, but you might wanna follow this outline in order to understand what is about to happen.

Installed Ionic cli latest npm install -g ionic@latest

Created a new Ionic 2 project ionic start khophi

I chose the ‘Side Menu’ Starter template

After everything, this is the file structure I have

Created an auth module ionic generate page auth

This came with an auth.module.ts Module as well.

Go into the src/pages/auth/folder and delete the auth.ts. We have something better to put in there.

With the above steps out of the way, let’s dive in!

Auth Login Page

Create an auth-login.tsfile and put this in:

auth-login.ts

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

import{Component}from'@angular/core';

import{IonicPage,NavController,NavParams}from'ionic-angular';

import{AuthRegisterPage}from'./auth-register';

import{HomePage}from'../home/home';

@IonicPage({

segment:'auth-login',// will be used in browser as URL

name:'login'

})

@Component({

selector:'page-auth-register',

templateUrl:'auth-login.html',

})

exportclassAuthLoginPage{

constructor(publicnavCtrl:NavController,publicnavParams:NavParams){

}

goToRegister(){

this.navCtrl.push('register');//IonicPage in use

}

}

We then update our auth.module.ts to take this form:

auth.module.ts

1

2

3

4

5

6

7

8

9

10

11

import{NgModule}from'@angular/core';

import{IonicPageModule}from'ionic-angular';

import{AuthLoginPage}from'./auth-login';

@NgModule({

declarations:[],

imports:[

IonicPageModule.forChild(AuthLoginPage),

],

})

exportclassAuthPageModule{}

Now, we create a new file, auth-login.module.ts, a dedicated module file that’ll go along with our auth-login.tsfile. In this auth-login.module.ts, add:

auth-login.module.ts

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

import{NgModule}from'@angular/core';

import{IonicPageModule}from'ionic-angular';

import{AuthLoginPage}from'./auth-login';

@NgModule({

declarations:[

AuthLoginPage,

],

imports:[

IonicPageModule.forChild(AuthLoginPage),

],

entryComponents:[

AuthLoginPage

]

})

exportclassAuthLoginPageModule{}

A chunk part of the task has been accomplished at the moment. To proceed, we’re left with the step of including our auth.module.ts and auth-login.module.ts in our app.module.ts, bringing our App Module to reflect these changes: