Ionic path routing (like RouterModule in Angular 2)

Reposting from stackoverflow ( Probably should have posted here first.

Using Angular 2, I am able to define my routes like this:

    { path: 'contacts', component: ContactsComponent }

Then, in some html, I can refer to it using the routerLink syntax:


This works great, and ultimately it allows me to replace the string with a binding, so I can get the paths at runtime, allowing the data to determine the navigation structure.

Now, I’m attempting to do something similar in Ionic 2, but if it’s possible, it’s not obvious to me. I’ve seen how you can use [navPush] to bind to a page using deeplinking (like this person did:, but that requires the page to be defined ahead of time in the component that wants to use it.

Does Ionic’s navigation structure support this?

These links should give you all the information you need:

Thanks, I had seen those links, but they did not give me the detail I needed. I did end up answering my own question, however, on the stackoverflow link.
Basically, I was missing the fact that the “name” is what’s needed to reference by the navPush in the html.

No. The primary objective of the Ionic router is to provide a native device experience, so Ionic routing is fundamentally different from Angular desktop routing. My recommendation is that you post what behavior you’re trying to achieve in terms of what the user sees or the database does, so people here can suggest ways to make that happen in Ionic 2.

The DeepLinker provides “breadcrumbs,” meaning that if Ionic navigation gets you to a page, the Deeplinker can provide a link to get back to the page quickly. The Angular notion of using dynamic routing to drive from page to page isn’t what the Deeplinker is meant for.

Edit: Just noticed you report you solved the problem. I’d be really cautious about that. You might have found a simple use case where a kluge works, but unless I misunderstand completely, your general approach is dangerous.

Hi Aaron, I’m trying to redirect my app to a certain page. Is that possible in Ionic 2?

My use case is that I’m using facebook/google log in from a .net web api, so the user gets directed away from my app to select which account/give me access to their accounts on the respective site (fb/google). How would I go about either watching the url for changes, or getting the nav params when they’re added to the url in my ionic app?


So you’re only building a web app then right? Not a mobile app?

@AaronSterling, Thanks for the comments - I’ll try to explain a bit better what I’m aiming for, and you guys can tell me if I’m off the mark.

I need to show a clickable list of items in a generic fashion - they’ll all have a title, a detail string, an icon, etc, and most importantly, some way to provide a navigation to another page. Since this is a generic list, I cannot know what page I’ll be navigating to when the user clicks on an item in the list. So, this means I cannot use Ionics standard navPush=“somePage”, where the somePage is a property defined in the backing class.

So, since the navigation destination will be contained in the json I receive from the service, I have to be able to tie the string from the json file to Ionic’s navigation. Does this explain a bit better?

Using the name in the path defined in the deeplink seemed to work, but you’re right - it’s very possible I just haven’t hit the limitation of that.

Thanks for your help!

(by the way, what’s the etiquette on this forum for hijacking threads? Is that kosher?)

@rlouie, I’m building a progressive web app, so we’ll be targeting desktop as well as mobile devices.

Okay, the reason I ask is that on mobile you will not be redirecting back to a url, you will be using like the facebook plugin to log in, and then you will have to wire that up a different way. It’s only a redirect url on the web.

So ya, ultimately you can use deep linking on the web side for the redirect url, or alternatively just check for the params on app launch and then if they exist push the page you want onto the nav stack. Then on mobile I suspect you’ll want to handle it differently.

Ya, sorry, you did get a little hijacked and I responded to it, my bad.

Regarding your issue, I’m not sure why deep linker wouldn’t work as described, I’d be interested to hear why @AaronSterling says it’s dangerous, I’m maybe missing something though.

Alternatively, you could build a map of data to component, like data type 1 should open with component A, etc, then when they click on one you use that map to open the component you want.

Sorry - didn’t mean to hijack it. I thought you had solved your issue and it seemed like a similar issue to what I was dealing with. I will remove my posts

@rlouie, Yes, I had considered doing a mapping as you suggest. It would work, but adds a bit more maintenance overhead that I was looking to avoid. But, a reasonable alternative if deeplinking is error-prone.

@bkoenig, no problem!

Maybe “dangerous” is too strong and I should have said “unexpected behavior,” but maybe not. I was thinking of some of the explanation in this thread

talking about the difference in routing structure between Angular and Ionic. Beyond that, if you search “routing” in the GitHub issues, you’ll see a lot of discussion especially when ion-tabs are involved. That’s a situation in which use of the NavController is even further away from Angular routing than a “normal” non-tabbed Ionic app is.

Guys, overall, is there a good article comparing ionic router vs the standard angular router?