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 )-
-
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.
-
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.
-
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
- Respects browser navigation including back/forward & url-based states
- 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
- Supports the equivalent of guards and resolves
- 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”