Skip to content

IonicPage – Link to Pages with URL like a Pro

Posted in Javascript

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:

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

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:

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:

At this stage, we should be able to enter localhost:8100/#/auth-login in the browser and get something like this:

The Auth Register

Well, if you thought for a second I would do that step for you, then you’re mistaken. All the best with it!

Lemme know in the comments any issue you come across. The same procedure we used for the Auth Login, should work for the Auth Register too.

Happy Ionizing!