Hello,
I am having issues with deep link mixed with a lot of things. The idea is to build a PWA so routing is kind of essential. Maybe some of you might came across something like this. I think is a design issue but maybe someone know how to hack it. I know it is going to be a long topic but please bare with me.
Lets start with the hierarchy.
app.html
<ion-nav [root]="rootPage" #appNav></ion-nav>
in my app.component.ts ngOnInit I check if i am logged in, then do nothing, if not, setRoot to LoginPage and when logged in successfully, setRoot MainPage.
main.html
segment: /main
<ion-split-pane>
<ion-menu [content]="mainNav">
</ion-menu>
<ion-nav [root]="rootPageMain" main #mainNav></ion-nav>
</ion-split-pane>
inside the ion nav is where the rest of the pages are. There is also a special page with tabs:
list-contacts.html
<ion-tabs tabsPlacement="top">
<ion-tab tabTitle="Todos" tabUrlPath="" [root]="tabPages.all"></ion-tab>
<ion-tab tabTitle="Clientes" tabUrlPath="" [root]="tabPages.clients"></ion-tab>
<ion-tab tabTitle="Expertos" tabUrlPath="" [root]="tabPages.experts"></ion-tab>
</ion-tabs>
Here I use a “hack” I found in http://blog.enriqueoriol.com/2017/01/ionic-deeplinker-ii-urls-y-tabs.html so the tabs won’t collide with the DeepLinks. The problem is that I will end up with a // in between the url because I put the segment in the configuration (see below).
deepLinking configuration:
IonicModule.forRoot(MyApp, {}, {
links: [
{ component: MainPage, name: 'Home', segment: 'main' },
{ component: ListCaseFilesPage, name: 'Expedientes', segment: 'expedientes' },
{ component: ViewCaseFilePage, name: 'Ver Expediente', segment: 'expediente/:caseFileId', defaultHistory: [ListCaseFilesPage] },
{ component: EditCaseFilePage, name: 'Editar Expediente', segment: 'expediente/:caseFileId/editar', defaultHistory: [ListCaseFilesPage] },
{ component: EditCaseFilePage, name: 'Crear Expediente', segment: 'expediente/nuevo', defaultHistory: [ListCaseFilesPage] },
{ component: ListCourtsPage, name: 'Juzgados', segment: 'juzgados' },
{ component: ViewCourtPage, name: 'Ver Juzgado', segment: 'juzgado/:courtId', defaultHistory: [ListCourtsPage] },
{ component: EditCourtPage, name: 'Editar Juzgado', segment: 'juzgado/:courtId/editar', defaultHistory: [ListCourtsPage] },
{ component: EditCourtPage, name: 'Crear Juzgado', segment: 'juzgado/nuevo', defaultHistory: [ListCourtsPage] },
{ component: ListContactsPage, name: 'Contactos', segment: 'contactos' },
{ component: ListAllContactsPage, name: 'Todos', segment: 'todos' },
{ component: ListClientsContactsPage, name: 'Clientes', segment: 'clientes' },
{ component: ListExpertsContactsPage, name: 'Expertos', segment: 'expertos' }
]
})
So, the route to ListAllContactsPage would be /main/contactos//todos. In the site I mentioned they put the segments as empty and the tabUrlPath would contain the last segment but the problem is that when first entering the app, it would go to the first empty segment it could find, i.e.: { component: ListAllContactsPage, name: 'Todos', segment: '' }.
The other (and main) issue is that when entering the app and logging in, instead of the setRoot going to:
it shows:
As you can see from the dev inspector, the split pane is there, but is somehow hidden. Also, the back button goes to the same view without any button. And is not a media query issue because of the size with the inspector open, it happens full screen too.
As I said before, it seems it is a design issue with deep links that makes it impossible to work with nested ion-navs. And the “segment” design complicates things when the structure is repetitive and it is tightly coupled with the previous view.
Does anybody have any ideas of what can I do? I was thinking of using uiRouter but I don’t know how to integrate ionic pages with it.
If you reached this far, thank you very very much!