How to configure deeplinks in AppModule.forRoot()?

ah. I have not implemented this with tabs.

I think I’m going to abandon tabs. There are some other good reasons for it in my app as well. It doesn’t seem like this area is well-documented or completely fleshed out yet in ionic 2.

Thanks again for your help.

In case someone is reading this to make DeepLinker work, here is a working src/app/app.module.ts compatible with clean project based on “tutorial” template (2016-12-22), which was originally created with command ionic start MyIonic2Project tutorial --v2.

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler, DeepLinkConfig } from 'ionic-angular';
import { MyApp } from './app.component';
import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
import { ItemDetailsPage } from '../pages/item-details/item-details';
import { ListPage } from '../pages/list/list';

export const deepLinkConfig: DeepLinkConfig = {
    links: [
        { component: ListPage, name: "List Page", segment: "listpage"},
        { component: HelloIonicPage, name: "Hello Ionic", segment: "hello" }
    ]
};

@NgModule({
  declarations: [
    MyApp,
    HelloIonicPage,
    ItemDetailsPage,
    ListPage
  ],
  imports: [
    IonicModule.forRoot(MyApp, {}, deepLinkConfig)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HelloIonicPage,
    ItemDetailsPage,
    ListPage
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

The things that definitely make sense but took me a while to find out, since they were not explicitly told in the documentation of DeepLinker, were that
(1) I must import DeepLinkConfig, and that
(2) the url must include /#/.

So first I kept trying to load http://localhost:8100/listpage instead of http://localhost:8100/#/listpage.

Thanks to @FdezRomero and @jgw9617 for helpful forum posts, that directed me on the right path.

1 Like

Hi, is there any lazy loading in the Deeplinker navigation.

@pavankumar123 No, Ionic navigation doesn’t support lazy loading yet.

So, what the hell are we supposed to use?

If I add <base href="/"> to my index.html, I break mobile builds.
If I remove it, I break browser/desktop builds.

How are we supposed to handle this???

EDIT

Ok, spoke too soon.

They key is to remove the base from the index.html.
Also, we need to import import { APP_BASE_HREF } from '@angular/common'; on our app module.

Finally, we need to add this to our providers section on the module:
{provide: APP_BASE_HREF, useValue: '/'},

However…
This breaks the ability of the mobile application to fetch resources from the app (icons, images, etc).

Resuming, the state of the art in terms of Deeplinking and PathLocation strategies is broken… very, very broken

1 Like

Hi @celsosantos. We are using the Deeplinker in our PWA in production and it works perfectly with the hash symbol (#) as some users and myself pointed out above. Just in case you’re interested in this as a workaround.

1 Like

Hi.

Well, yes, I had to fallback to that approach too, though it just doesn’t feel right.
Guess that’ll have to do for now

Hi, I really dont know how can it work for you, but for me its totally broken, maybe could you help me find a way to use deeplinks in right way please?

I have starter tabs template in ionic 3, this is my deeplink config in app.module.ts:

export const deepLinkConfig: DeepLinkConfig = {
	links: [
		{ component: AboutPage, segment: 'about', name: 'About' },
		{ component: HomePage, segment: 'home', name: 'Home' },
		{ component: ContactPage, segment: 'contact', name: 'Contact' },
		{ component: ContactDetailPage, segment: 'detail', name: 'ContactDetail', defaultHistory: ['Contact'] },
	]
};

and in app.component.ts I want to navigate user to contactDetailPage in Contact tab… I am trying to do it this way:

ngOnInit() {
	window.location.href = "#/contact-tab/detail";
}

this is my tabs.html

<ion-tabs>
    <ion-tab [root]="tab1Root" tabUrlPath="home-tab" tabTitle="Home" tabIcon="home"></ion-tab>
    <ion-tab [root]="tab2Root" tabUrlPath="about-tab" tabTitle="About" tabIcon="information-circle"></ion-tab>
    <ion-tab [root]="tab3Root" tabUrlPath="contact-tab" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

When I navigate directly in app by click to tab Contact and then to button for push to ContactDetail it works

and url looks like this: http://localhost:8100/#/contact-tab/detail
but when I open new tab in my browser and paste the URL above, then my tab-bar is missing


and my url changes to http://localhost:8100/#/contact

I am totally frustrated from this, can you help me please?