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!

  • Michael Sevestre

    Nice post.
    How do you deal with deep-linking to other pages that require authentication.
    Say I have another page accessible via the segment “settings”.

    if the user directly navigates to ‘http://localhost:8100/#/settings’, how can you ensure that he is being redirected to the auth-login page first (for example if he is not logged in yet) ?

    Cheers,
    Michael

    • One way would be to add an auth check on ionViewCanEnter. However, i found that approach to be very bad, simply because the page would load before the ionViewCanEnter would kick in, causing a quick switch flash thing.

      Building progressive web apps with Ionic 3 is a horrible disaster. After a month of struggles, I quit using Ionic and switched to Angular 4 (now on 5), and the PWA is excellent.

      For cross-device mobile apps, Ionic is great. For PWAs, Ionic is useless, and not just with their routing nonsense (pages, views, nav.push, nav.pop etc) but the whole PWA thing they shout to do.

      Building the same application with Angular 4, and the routing power is amazing. With the canActivate route guard, the possibilities are endless, considering you can add children routes seamlessly and many more.

      Enough talking. My point is, just drop Ionic if you’re building a PWA or users would interact with the application primarily via a browser.

      Otherwise, all the best with Ionic’s frustrations with basic routing.