Examples for ionic with angular 2 router

hello,
i saw on the release blog post that ionic 2 supports angular 2 router but i cant find any examples and now im stuck
(trying to take the ionic 2 tutorial starter and make it use angular 2 router)
im new to ionic and i dont know where should i begin… for example when i use angualr 2 router i should still be using <ion-nav> and not <router-outlet> etc
any advice or example would be appreciated!

3 Likes

Take a look at our routing example here: https://github.com/driftyco/ionic/tree/2.0/src/components/nav/test/routing

We plan on adding more examples of this after Angular makes some changes to their router, see this issue:

The conference app is an app we built using Ionic 2 so it’s a good app to reference.

1 Like

It seems to having issue. If I press back button after configuring routeConfig, root page getting redirected to the same page again for 3 consecutive times. Page is getting exited after 4th back press (browser back button)

This forum doesn’t seems to be active.

hello dheeran , the forum seems active to me, but they probabley wont go back to ‘old’ forum posts, you will have a better chance of getting an answer if you open a new post

I hope you can find a moment to reply!

We would have loved to have had a look at your example but it seems it has been pulled down. Would you be willing to share it again?

Our team has been waiting for the right time to start a new project using Ionic 2 for a television network so as you can imagine the pressure is on for us to get moving.

We are looking to build a browser based web application that will eventually need to be deployed as a hybrid app for ios and android, so ionic seemed a perfect fit, however…

We face this same routing issue. We would need to be able to implement the Angular router in-order to have valid URLs for sharing and for SEO to work properly as well.

We realize that the Ionic team is waiting for Angular to finalize their router, but we need to know 2 things:

  1. Is it bad practice, or just not a good idea to use Ionic as a browser based application? Are we incorrect in thinking --no-cordova is intended for this purpose?

  2. Does the Ionic team absolutely intend on integrating the ability to use the Angular router when it is ready? We need to launch our beta by July 1 which is rapidly approaching. Can you offer any insight into when you feel Ionic 2 would support the use of the Angular 2 router?

Any reply as soon as possible would be greatly appreciated as we would hate to miss an opportunity to use Ionic for this project. Part of our team is pushing back for the reasons i’ve stated.

4 Likes

We recently changed our directory structure and renamed the ionic folder to src so the new URL is: https://github.com/driftyco/ionic/tree/2.0/src/components/nav/test/routing

However, this will not work with the latest release of the framework, beta 7. We added a section to our changelog about the router:

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.

Unfortunately, we will be waiting for Angular to release a stable version of their router, and then we will be adding it to Ionic. I spoke to the Angular team the other day and they will be releasing a blog with more information on the router soon.

No, it is not bad practice to use Ionic as a browser application. We are currently working on adding support for Ionic as a Progressive Web App: What are Progressive Web Apps? - Ionic Blog

Yes, we will be integrating the Angular router as soon as it is stable. We are not sure how close they are to finishing it, but hopefully more information will be given in the blog post. Their blog is here:

http://angularjs.blogspot.com/

4 Likes

THANK YOU SINCERELY for responding so quickly. This is a huge help! Hopeful to be able to roll out with Ionic!

4 Likes

@disrupt we have the same needs and are trying to do the same thing. Did you found some solutions?

So @brandyshea isn’t there a possibility to re-enable the deprecated router? We have also to go online with our project, we know, angular2/ionic2 is beta but for us it didn’t make sense write an angular1.x applaction and then migrate it.

We will not be enabling the deprecated router. If you’d like to use the old router please stick with the beta 6 release until we are able to release a new version with Angular’s router. Thanks and sorry for the inconvenience!

okay, the question was if I’m able to enable it for me own on ionic on my machine.

For now I have to pass to Meteor, I can not downgrade to beta.6 which require a very old angular beta with deprecated things I doesn’t support anymore.

I’ll wait for a later version and consider then if I’m able to use the great ionic framework.

Hi @brandyshea
sorry for my obstinately :yum:
On the the angular blog the announced the relseas of router alpha3 and write in the blog “The version 3 router is ready to use, and more capabilities are coming”, which means it should be usable and to use.

So my question, are you intend to enable now the new angular router for the ionicframework or would you wait for later router releases?

thx

Yes, we are looking into adding it now. :slight_smile:

4 Likes

Good new for us =)

Can we except to see it in beta.9 ??

Hi @brandyshea
Can we expect the new angular router be integrated for beta.10?

thanx a lot

Really looking forward for the routing functionality. Thanks :slight_smile:

1 Like

Beta10 is suportting new router?

I’m using Ionic 2.0.0-beta.32 and Angular JS 2 ROUTER_PROVIDER from node_modules/angular2/bundles/router.dev.js doesn’t appear to be available to inject. I’m just going to build in Angular JS 2 and integrate my project later into Ionic 2 when its finalised

I’m starting to learn Angular 2, took a course and understood most of how it works, and then came to Ionic 2 example and saw - no router ! Instead, I see a this.nav.setRoot(page.component); thing, that looks to work… Could you please explain me why you want to use the normal A2 router and not this ionic navigation system ? I want to understand.

Thanks,
JB

hi jerry,
as far as i understand it, the ionic navigation system does not support url navigation while the A2 router does.
so the real question is “why do you need url navigation instead of using stack navigation?”

there are a few reasons, but for me personally i need both a native app and a progressive web app.
without url navigation a web app is not really an option…