URL routing for Ionic PWA

I’m part of a team trying to turn an existing AngularJS application into a progressive web application using Ionic3/Angular4. One of our main hurdles so far has been desktop navigation with URLS. Here’s what I’ve tried so far to get a simple tabbed view working with URL routes ( so URL changes to reflect page and vice versa )-

  1. Deeplinker with segments - In order to switch tabs had to use navcontroller.push and navcontroller.pop which either layered up a lot of components or did not preserve browser history if i pop and then push. Additionally ionic is not reading navoptions correctly if you go back in the browser. Method used was ion-segment with switch based on navparam. This also resulted in all parent components re-loading their data.

  2. Ion-tabs - You can’t provide component bindings to an ion-tab so we’re unable to load components as ion-tabs if they require inputs. Ion tabs are only intended for use at root level of an application ( I know they can be nested now but behaviour is inconsistent ). Hitting browser back or forward quickly more than once will break the tab navigation.

  3. Angular router - I’ve had angular router work well after splitting to desktop and mobile builds but if I’m building with Ionic-App-Scripts I keep running into issues with AOT ( runtime compiler not loaded or if I use ng-router-loader in webpack.config then can’t find the NgFactory aot files. I also can’t see ionic writing these files even if I use the aot_write_files_to_disk flag)

It seems to me that Ionic is just not ready for PWA. If someone disagrees could you please post a solution that you have found that

  1. Respects browser navigation including back/forward & url-based states
  2. Does not re-load every component above the current component if you’re just changing the child state ( say I’m on foo/bar/a, changing to foo/bar/b should used cached foo and bar data if required by a and b
  3. Supports the equivalent of guards and resolves
  4. Allows Angular components to be loaded as the root of a tab and data to be provided to that component to allow modularity and re-usability.

In my mind a progressive web application adjusts to desktop and doesn’t just blow up a mobile app interface to a larger size, that’s why I think this tab navigation is crucial event though it may not fit the mobile “Ionic way”


I can’t agree more with you : Ionic URL routing is just not ready to make a decent URL path for webapp. I hope it will improve in a near future.

If not, a solution I see would be to use the future ionic web components with angular 2+.

Apparently they are working on a new routing api for v4 (Meeting notes of 2017-08-07 (https://docs.google.com/document/d/1LrPDUkfXpqPIsghaSCxHyN1GIZ0TK2bwFxOZx2GKWtI/edit).
So lets see what will come.


Thanks for the update I really appreciate it