Ionic-framework: Ionic2: Can't find any information on how to implement URL routing

[guzmo]

While entering the app in a webpage I need to be able to go to the URL /SomeId to make it easier for users to find what they are looking for but I can't find any information on how to implement URL routing.

When using the native apps the new routing is really cool ;)

[adamdbradley]

Angular2's router is currently going through some changes, and for that reason I've held off a little bit on showing how to use routing with Ionic. I've slated it for beta.5 to reevaluate how Ionic ties in with ng2 router. Until then, you can take a look at this example on how it currently works: https://github.com/driftyco/ionic/blob/2.0/ionic/components/nav/test/routing/index.ts#L47

[guzmo]

Thanks for the quick response!
I think I've tried that approach without success but I'll give it another go :)

[guzmo]

Will the state routing still work when using this? I got it to work once or twice but it is not stable :S
http://localhost:8100/#/test worked once then it stopped working :P

[guzmo]

My mistake, forgot to remove

this.rootPage = HelloIonicPage;

[thiphariel]

Hi @adamdbradley. Can we have a bit more information about ionic 2 routing now ? It's seems not use the same behaviour / interfaces that Angluar 2 provides.. I can't trigger some of these provided here : https://angular.io/docs/ts/latest/api/router/OnActivate-interface.html

And also, I can't get rid of this "HashLocationStrategy" that ionic2 seems to override or something else. Is there an option to custom it ? (With PathLocationStrategy I mean)

Thanks !

[warnerpinz]

@adamdbradley @brandyscarney the URL you guys shared is not accessible
https://github.com/driftyco/ionic/blob/2.0/ionic/components/nav/test/routing/index.ts#L47

Could you guys please share a sample working sample of how routing works in ionic2 even if it is not final? At least we can try and proceed. Thanks

[Matju-M]

@warner-pinz this is the updated URL https://github.com/driftyco/ionic/blob/2.0/src/components/nav/test/routing/index.ts

[brandyscarney]

Note: Angular is refactoring their router again and it is not working with the latest version of Ionic (beta 7). From our changelog:

The Angular router is currently under heavy development and refactoring. As a result of this, Angular’s router is currently disabled within Ionic. If your app requires use of the router we recommend waiting until a future release of Ionic when Angular has completed work on the new router. However, this does not affect Ionic’s navigation system and it continues to work with the same API from previous versions.

[eithe]

Will routing be added to the ionic 2 roadmap or to one of the github milestones anytime soon so we can get a hint on when to expect this?

[scottsword]

@brandyscarney Can we get an update on when this is going to be addressed? Also, is there a preferred way to prevent auto-reload from redirecting to your rootPage? Getting bumped back there every save is sort of a bummer.

[troyanskiy]

Isn't it something like DeepLinker which is described in API docs ?

[snowcxt]

I don't think so:

Unlike traditional web apps, URLs don't dictate navigation in Ionic apps.

[ronakkaria]

@snowcxt Can you link the source of that quote?

[scottsword]

@ronakkaria https://ionicframework.com/docs/v2/api/navigation/DeepLinker/

They also say this here:

When it comes to URLs, Ionic 2 works a bit differently than Ionic 1. Instead of using URLs to navigate, we use them to make sure we can always come back to a page (on app launch, for example). This means we aren’t limited to using href to navigate around. However, we still have the option to use a URL to navigate to a page when necessary.

[snowcxt]

@ronakkaria The source is https://ionicframework.com/docs/v2/api/navigation/DeepLinker/

[todrules]

You can use the 'locationStrategy' Config option now. I'm not sure when it went in, but I'm using the Angular router and wanted to get rid of the hash, and that option did the trick. I didn't see this option in the docs and only found it digging through the source code.

You can use it like this:

IonicModule.forRoot(AppComponent, { locationStrategy: 'path' })

[jczaplew]

@todrules - Any chance you could provide a full example of using the path location strategy?

[jczaplew]

Here is an example of using the path location strategy - http://plnkr.co/edit/syUH0d6SJd2gAjqaPLwr?p=preview

[tadeussenf]

Just a quick note, to get working page reloading while 'ionic serve' use IonicModule.forRoot(AppComponent, { locationStrategy: 'hash' })

This will generate /#/-Url's and reloading a deeplinked page will work. I did not find a way to enable mod_rewrite in ionic-cli for now.

[pavankumarkatakam]

Is Deeplinker has ability of nesting and lazy loading the modules ? Im actually converting the angular2 web app to hybrid app.

[DamengRandom]

How the deep linker read question mark with parameters url (eg: http://localhost:8100/#/resetpassword?key=xxxxxxxx&[email protected])
when my client click email link, the ionic 2 app opens and redirect to resetpassword page, but finally i will go the the home page, all the key and email parameters are gone.

Please help me, thx guys

[pcsantana]

Hi @DamengRandom , did you find a solution? I'm facing the same problem.
Thanks!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.