Demo: Ionic project with a tab based layout
which shows different kinds of route definitions
for lazy modules
The example includes two kinds of route definition,
which are shown in Tab One and Tab Two.
You can also see how to dynamically adjust the routing to use pages in different tabs.
The normal page flow for each tab is Tab -> Profile -> Profile Settings.
The module flow is following: App -> Tabs -> Tab -> Profile -> ProfileSettings.
Each page is a lazy loaded module.
For the navigation to the previous page I used the ion-back-button.
Each tab is stateful, which means that displayed pages are kept at a tab change.
Because the profile page can be called by tab one and tab two,
there is some logic to make back and forth navigation work correctly.
For Tab One the whole page flow is defined in one file (s. tabs.router.module.ts).
It is also possible to move the whole routing in app-routing.module.ts.
For Tab Two there's only one one route definiton in tabs.router.module.ts:
TabsModule -> Tab2PageModule.
Every further route is defined in the then loaded module,
for this demo it means that the modules loaded behind Tab Two defining two routes.
First a no-name-route which loads the corresponding component.
(For the ProfilePageModule that means the ProfilePage.)
Second the page-module we can route to.
(For the ProfilePageModule that means the ProfileSettingsPageModule.)
With Ionic 4.0.0-beta.18 there was breaking changes for angular tabs.
The usage of ion-tab was removed and it's not necessary to use named outlets.
A common mistake is that not all continuing routes (child-routes) are defined in the children-block.
If you don't define it in the child-block routing may seem to work,
but things like ion-back-button are fucked up.
git clone https://github.com/servrox/demo-ionic-tab-routing.git
cd demo-ionic-tab-routing
yarn
ionic serve
- Ionic CLI - version 4.10.3
- Ionic Framework - @ionic/angular 4.0.1
- Marcel Mayer - servrox.solutions