Does using Angular 2 router make sense in Ionic 2 application?

Question

We have made an attempt at moving our Angular 2 app (written by a friend of ours, thus we might not know all the details) into Ionic 2. However, we haven't managed to make it work yet, thus questions below.

1. Will Angular 2 router work in Ionic 2?
2. Does it make sense to use Angular 2 router in Ionic 2 apps or should we go straight to an alternative, like DeepLinker?

EDIT: I am not sure what the current state is, but I read here that:

«The Angular router is currently under heavy development and refactoring. As a result of this, Angular’s router is currently disabled within Ionic.»

3. Where in the code/metadata/build-script/package.json is the entry point that activates the router? We have the routing in the NgModule but it does not seem to be kicking into action when we access the app's main URL nor sub-URLs:

   @NgModule({
     declarations: [
       AppComponent,
       TestComponent,
       AgendasListComponent,
       TasksListComponent,
       SnackBarComponent,
       ConfirmationDialog,
       AgendaComponent,
       LoginComponent
     ],
     entryComponents: [
       ConfirmationDialog
     ],
     imports: [
       BrowserModule,
       HttpModule,
       MaterialModule.forRoot(),
       AngularFireModule.initializeApp(firebaseConfig, firebaseAuthConfig),
       RouterModule.forRoot([
       {
         path: '',
         redirectTo: 'agendas',
         pathMatch: 'full',
         canActivate:[ RouterGuardService ]
       },           
       {
         path: 'agendas',
         component: AgendasListComponent,
         canActivate:[ RouterGuardService ]           
       }
       ...
   

Answer 1

I'm sorry for the late suggestion. I've been there where you are too. And honestly, Ionic is a nightmare. It was good though, until...

The reason we use Ionic is to develop once, and deploy multiple times. web, mobile/tablet and possibly windows (linux?)...

But the mere thought, that the app we're building looks horrible on the web, like an enlarged mobile app. I gave it a try, thinking I'd adjust it a bit. But then, I would leave whole initial idea, having to maintain multiple code bases.

This, on the UI part. But then I found out with the arrival and development of Ng2, Ionic also chose to introduce NavController, in stead of waiting for the (reactive) Router... And that's where things got messy... So, besides having to worry about two code bases for the UI, I also had to rewrite it for the Router / NavController conflicts.

Meanwhile, my eye fell on Minks Gechev's Angular Seed and also successfully mixed the Ionic base with it.

After having had a silencing discussion on an Ionic Github Issue, in which more than 15 people shared my concerns about the NavController problem. In which an Ionic core developer tried to silence us, telling us "it will be solved soon", on which I asked to "define soon". He almost kicked me out.

Meanwhile, I just tingled with Nathan's Angular Advanced Seed. Nathan is working for Telerik, the driver behind the open source Nativescript (which is now a separate foundation itself)

At first, I was sceptical, because Telerik tends to overpromise. I've tried to shoot at it, but it really is faster and it is not-hybrid, it is native.

I myself do like flexbox. So, I'd search for a (web/windows) UI using it. Why not Onsen?

So, go to Nathan's seed and get Onsen in it. This is the frontend. Backend - Keycloak and vert.x

Answer 2

Instead of using Angular 2 router the recommendation is to use NavController & Co: https://ionicframework.com/docs/v2/api/navigation/NavController/.

Ionic 2 also has support for Deep Links into your application as you have noted yourself. You can read the official blog post here: http://blog.ionic.io/deeplinking-in-ionic-apps/.

Here is a plugin for this https://github.com/driftyco/ionic-plugin-deeplinks which allows you to create custom URLs that will open your application to specific views if that is one of your requirements.