Do anyone know how to use the deepLinkConfig from IonicModule? I could only find documentation at the ionic-plugin-deeplinksreadme, but I’m missing how to make this work with deepLinkConfig (aka URLs for mobile web):
Hey, sorry for the delay on this! We are currently working on getting the docs complete and out there for this. The basics of the deepLinkConfig is that it allows you to “attach” a url to each of your pages in your Ionic app. So, for example, if you have an Ionic PWA that has the deepLinkConfig set up you will see a the URL change dynamically when you navigate to a new page, just like a standard router and that URL will be tied to that page. This means that your app will now have URL’s that your user can share etc, which is highly important for a PWA. The big difference between a “normal” router and our deeplinker is that the deepLinker does not control the navigation, but is instead just layed on top of our NavController. I will update this post with a link when the docs hit the live site.
No problem! That sounds great, and fits our use case perfectly. It would be nice to also know how to combine the Deeplinker with the Ionic Deeplinks plugin, so we can use the same config or URLs for Universal Links.
There is nothing special about my @ngModule or entryComponents, but here goes an example of what I have. I’m not using use a side menu, but it shouldn’t affect the deeplinks as you push/pop pages in the same way. I have redacted it for simplicity (no need to show all the pages and services that I use).
The only difference to my previous message is that as Justin commented, I had to set the deepLinkConfig as an export variable and use it inside IonicModule.forRoot() so the AoT compiler doesn’t complain when building later.
The thing is I came from Angular2 with Material Design, which use angular router and so on.
There I create an app.component.ts which contains my html scaffolder my @RouteConfig and my < router-outlet >< /router-outlet > where I render my pages.
In this case, it is very easy for me to handle main page, header, footer and dynamic content which are my pages. Also I had a Menu Button which loads only a DIV for my menu.
This new in Ionic is very different and I wait a lot to get the custom router, but now it is here I’m still not sure how to implement the classical way with the ionic way.
The Deeplinker is not a router, and should not be used as such. A typical router like the Angular 2 Router or UI-Router cannot replicate the complex push/pop and tabs behavior from native apps. From the new Deeplinker docs:
Unlike traditional web apps, URLs don’t dictate navigation in Ionic apps. Instead, URLs help us link to specific pieces of content as a breadcrumb. We keep the current URL updated as we navigate, but we use the NavController’s push and pop, or navPush to move around. This makes it much easier to handle the kinds of complicated nested navigation native apps are known for.
We refer to our URL system as a Deep Link system instead of a Router to encourage Ionic developers to think of URLs as a breadcrumb rather than as the source of truth in navigation. This encourages flexible navigation design and happy apps all over the world.
Instead of a router guard, you can use a Nav Guard with NavController. It works a bit differently but the result is the same.
Iionic2 will bring together native apps, PWA and classical WEBAPPS, so for this ionic team integrate their own custom url router, which should now be DeepLinker? Right?
For PWA and WebApps the router should be flexible enough to do what I wrote. So now I’m not sure if DeepLinker is the router we are waiting for or if I really understand what the team want to do or what the DeepLinker is.
Sorry, but in my opinion what you wrote doesn’t make sense. For one part you are saying Ionic should bring web apps/PWAs and native apps together, but for other you want a different navigation behavior for them just because it fits your current situation better (not even your use case). Doing that would go against a unified codebase for all platforms.
The Ionic team is working hard so we can develop native experiences on the web: why would you not want this in your app and use a traditional router instead, with all the problems attached to not fitting common use cases?
Again, the Deeplinker is not a router. It’s a different solution to solve the problem of being able to link to content inside your app. A router controls the navigation and assumes a navigation behavior that comes short for native apps, whereas the Deeplinker doesn’t. The NavController behind it is more than flexible enough to do what you want with the Nav Guards, you just need to be flexible yourself and be willing to do it in a different way.
But hey, if you think there are use cases the Deeplinker doesn’t cover or it should work differently, just open an issue or a PR and the Ionic team will check it out
@FdezRomero I cannot make it work, all settings just as in your example. When I push a page into root nav, the new page is loaded as expected, but URL is not changed. When I change the url manually in the browser’s location bar (adding appropriate segment, e.g. /#/details) the page is loading, but the url is reset to /#/. Thanks.
I’m also battling with the DeepLinker right now and got the basics to work.
I only have some problems with getting it to work in combination with a Tabs page.
To not introduce another topic in this thread I’ve created a new thread for it, but for those who are interested (or have some bright ideas):