Hi there,
Do anyone know how to use the deepLinkConfig from IonicModule? I could only find documentation at the ionic-plugin-deeplinks readme, but I’m missing how to make this work with deepLinkConfig (aka URLs for mobile web):
IonicModule.forRoot(appRoot, config, deepLinkConfig)
Thanks!
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.
Thanks!
Also, here is an example deepLinkConfig
export const deepLinkConfig: DeepLinkConfig = {
links: [
{ component: ContactPage, name: "contact", segment: "contact"},
{ component: HelloPage, name: "hello", segment: "hello" }
]
};
That should give you a start. The docs are being worked on as we speak, so they should hit very soon 
I tried a basic static link and It Just Works!
If somebody wants to try just import DeepLinkConfig:
import { IonicApp, IonicModule, DeepLinkConfig } from 'ionic-angular';
And add deepLinkConfig after the normal Ionic config inside the imports array:
IonicModule.forRoot(App, {}, deepLinkConfig)
The next question now is now to add unique ids for data as a segment, like /users/123, so we can feed it to the navParams and load the right content for the page (if that is how it works).
This is exciting. Waiting for the docs to be finished! 
Hey @FdezRomero,
After a bit of digging…check out below for routing with params (I just use a static getter when calling IonicModule.forRoot):
import {DeepLinkConfig, DeepLinkMetadata} from ‘ionic-angular/navigation/nav-util’;
import {AboutPage} from “…/pages/about/about”;
export class RouteConfig {
constructor(){
}
static get routes() : DeepLinkConfig {
let aboutMeta = new DeepLinkMetadata();
aboutMeta.component = AboutPage;
aboutMeta.name = “about”;
aboutMeta.segment = “about”;
let aboutMetaTest = new DeepLinkMetadata(); aboutMetaTest.component = AboutPage; aboutMetaTest.name = "aboutTest"; aboutMetaTest.segment = "about/:test"; return { links: [ aboutMeta, aboutMetaTest ] }}
}
Then in the About page constructor:
constructor(public obj: NavParams) {
console.log(obj.data);
}
To answer my own question, and based on @dzincolorado suggestion, it’s as simple as defining the navParams in the segment, preceded with :. For example:
IonicModule.forRoot(App, {}, {
links: [
{ component: HomePage, name: 'Home', segment: 'home' },
{ component: DetailPage, name: 'Detail', segment: 'detail/:user' }
]
})
More information (work in progress) at https://github.com/driftyco/ionic/blob/master/src/navigation/deep-linker.ts
Hi @FdezRomero, can you please share more of your code, for example your @NgModule and entryComponents in app.module.ts?
Do you use a sidebar navigation in your app? Can you share more infos?
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.
import { NgModule } from '@angular/core';
import { Http } from '@angular/http';
import { IonicApp, IonicModule, DeepLinkConfig } from 'ionic-angular';
import { Storage } from '@ionic/storage';
import { App } from './app.component';
import { FirstPage } from '../pages/first-page/first-page';
import { SecondPage } from '../pages/second-page/second-page';
import { ApiService } from '../providers/api-service/api-service';
import { TranslateModule, TranslateLoader, TranslateStaticLoader } from 'ng2-translate/ng2-translate';
export function TranslateLoaderFactory(http: Http) {
return new TranslateStaticLoader(http, 'assets/i18n', '.json');
};
export const deepLinkConfig: DeepLinkConfig = {
links: [
{ component: FirstPage, name: 'First Page', segment: 'first' },
{ component: SecondPage, name: 'Second Page', segment: 'second/:id', defaultHistory: [ FirstPage ] },
]
};
@NgModule({
declarations: [
App,
FirstPage,
SecondPage
],
imports: [
IonicModule.forRoot(App, {}, deepLinkConfig),
TranslateModule.forRoot({
provide: TranslateLoader,
useFactory: (TranslateLoaderFactory),
deps: [Http]
})
],
bootstrap: [IonicApp],
entryComponents: [
App,
FirstPage,
SecondPage
],
providers: [
Storage,
ApiService
]
})
export class AppModule {}
I hope it’s useful!
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.
<data>
<header></header>
<main>
<router-outlet></router-outlet>
</main>
<footer></footer>
</data>
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.
Also, what’s about page guards?
Some ideas or helps?
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.
Hi @FdezRomero thx for your opinion.
I opened a new thread to discuss this better, here you can see my opinion and my use case.
THX
@mburger81 Great, I will follow your question
@lleevvyy I’m not sure what can be happening. I’m not an expert, I just need this feature so I’m tracking its progress.
This may be obvious, but check that:
ionic-angular@2.0.0-rc.1 and @ionic/app-scripts@0.0.36.In your app.module.ts you have:
DeepLinkConfig from ionic-angular
export variable of type DeepLinkConfig, with the property links as an array containing the segments.deepLinkConfig as the 3rd parameter in IonicModule.forRoot(App, config, deepLinkConfig).If this doesn’t work, you can share your app.module.ts file and I can check it out when I have time
Looks like you’ve made solid headway. I was curious if you’re running into any issues with the url not updating when pushing a page. I’m currently on RC.1.
Below is an outline of the app.module code:
@NgModule({
declarations: [
OurApp,
PAGE_PROVIDERS
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
IonicModule.forRoot(OurApp, {}, {
links: [{component: SearchPage, name: 'search', segment: 'search'}]
})
],
bootstrap: [IonicApp],
entryComponents: [
OurApp,
PAGE_PROVIDERS
],
providers: [
{provide: APP_BASE_HREF, useValue: "/m"},
{provide: LocationStrategy, useClass: PathLocationStrategy}
]
})
Notice the base href is set to “/m”.
Below is code to push the SearchPage when a button is clicked:
let options = {updateUrl: true, easing: "easeOutQuint", keyboardClose: true};
this.nav.push(SearchPage, routeParams, options);
I’m not sure exactly what’s missing, but I would expect the browser location bar to update with “/m/search”.
Thanks,
Denis
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):
@dzincolorado I’m confused about APP_BASE_HREF, where does it come from? I don’t remember seeing in the Deeplinker docs…
@FdezRomero, in our case, the root of the app is /m. So, all routes would look something like:
/m/search
/m/about
/m/more
Based on this, my understanding is that we need specify the APP_BASE_HREF so that the /m is ignored by the routing/navigation mechanism.
Thanks,
Denis