Deeplinks gives empty path - ionic-framework

Question

I have a problem of implementing DeepLinks. I can open the app from the URL like myapp://myapp.com/route. But it doesn’t handle path of it. It just opens the program.
I open it with :
this.deeplinks.route({
'/route': RoutePage
}).subscribe(match => {
// match.$route - the route we matched, which is the matched entry from the arguments to route()
// match.$args - the args passed in the link
// match.$link - the full link data
console.log('Successfully matched route', match);
}, nomatch => {
// nomatch.$link - the full link data
console.error('Got a deeplink that didn\'t match', nomatch);
});
But im not receiving any console logs and the path is empty, just the following message :
My config.xml
<plugin name="ionic-plugin-deeplinks" spec="^1.0.17">
<variable name="URL_SCHEME" value="iskibris" />
<variable name="DEEPLINK_SCHEME" value="https" />
<variable name="DEEPLINK_HOST" value="iskibris.com" />
<variable name="ANDROID_PATH_PREFIX" value="/" />
<variable name="ANDROID_2_PATH_PREFIX" value="/" />
<variable name="ANDROID_3_PATH_PREFIX" value="/" />
<variable name="ANDROID_4_PATH_PREFIX" value="/" />
<variable name="ANDROID_5_PATH_PREFIX" value="/" />
<variable name="DEEPLINK_2_SCHEME" value="" />
<variable name="DEEPLINK_2_HOST" value="" />
<variable name="DEEPLINK_3_SCHEME" value="" />
<variable name="DEEPLINK_3_HOST" value="" />
<variable name="DEEPLINK_4_SCHEME" value="" />
<variable name="DEEPLINK_4_HOST" value="" />
<variable name="DEEPLINK_5_SCHEME" value="" />
<variable name="DEEPLINK_5_HOST" value="" />
</plugin>
Link of calling the app iskibris://iskibris.com/route
Could someone help me?

Answer 1

Ionic Deeplinks has two methods to open another page.
route
routeWithNavController
When using route method you should use nav.push to navigate another page. You can implement it in your app.component.ts as below.
#ViewChild(Nav) nav:Nav;
constructor(private deeplinks: Deeplinks) {
platform.ready().then(() => {
this.deeplinks.route({
'/about': AboutPage
}).subscribe(match => {
this.nav.push(AboutPage);
}, nomatch => {
console.error('Got a deeplink that didn\'t match', nomatch);
});
});
}
}
Or else use routeWithNavController that takes a reference to a NavController and handles the actual navigation. routeWithNavController method can be implemented as below inside your app.component.ts
#ViewChild(Nav) nav:Nav;
constructor(private deeplinks: Deeplinks) {
platform.ready().then(() => {
this.deeplinks.routeWithNavController(this.nav, {
'/about': AboutPage
}).subscribe(match => {
console.log('Successfully matched route', JSON.stringify(match, null, 2));
}, nomatch => {
console.error('Got a deeplink that didn\'t match', nomatch);
});
});
}
And one thing,
In your config.xml ,
<variable name="URL_SCHEME" value="iskibris" /> should be changed to
<variable name="URL_SCHEME" value="myapp" />.

Answer 2

For me, the only way that worked was, weirdly, by using the routeWithNavController method and passing an empty object on the second parameter. I'm on Ionic 3 and testing on an iPhone emulator, by the way.
Here are the tests:
/**
* Using the routeWithNavController method and passing an empty object on the second parameter
* WORKS!!
* Did open the app and fired the "match" callback with the info of the clicked link
*/
this.platform.ready().then(() => {
this.deeplinks.routeWithNavController(this.nav, {
// Nothing here. Empty object
}).subscribe((match) => {
alert('Match');
alert(JSON.stringify(match));
}, (nomatch) => {
alert('No Match');
alert(JSON.stringify(nomatch));
});
});
the following examples didn't work.
/**
* Using the routeWithNavController method and passing an object with a "what would be" route on the second parameter
* DOESN`T WORK
* Did open the app but didn't fire any of the callbacks. Neither "match" or "nomatch"
*/
this.platform.ready().then(() => {
this.deeplinks.routeWithNavController(this.nav, {
'/': {}
}).subscribe((match) => {
alert('Match');
alert(JSON.stringify(match));
}, (nomatch) => {
alert('No Match');
alert(JSON.stringify(nomatch));
});
});
/**
* Using the route method and passing an object empty object
* DOESN'T WORK (kinda)
* Did open the app and fired the nomatch callback (after all, no route specified)
*/
this.platform.ready().then(() => {
this.deeplinks.route({
// Nothing here. Empty object,
}).subscribe((match) => {
alert('Match');
alert(JSON.stringify(match));
},
(nomatch) => {
alert('No Match');
alert(JSON.stringify(nomatch));
});
});
/**
* Using the route method and passing object with a "what would be" route on the second parameter
* By the way, here I tried both links:
* myapp://myapp.domain.com/
* myapp://myapp.domain.com
* DOESN`T WORK
* Did open the app but didn't fire any of the callbacks. Neither "match" or "nomatch"
*/
this.platform.ready().then(() => {
this.deeplinks.route({
'/': {},
}).subscribe((match) => {
alert('Match');
alert(JSON.stringify(match));
},
(nomatch) => {
alert('No Match');
alert(JSON.stringify(nomatch));
});
});
Because only the first one worked, I had to deal with the match object data and do the routing by myself, like this:
this.deeplinks.routeWithNavController(this.nav, {}).subscribe((match) => {
if (match.$link.path == "/list") {
this.nav.setRoot(ListPage);
}
}, (nomatch) => {});
Here is the full code of my working app.component.ts with deeplinks:
import { Component, ViewChild } from '#angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { Deeplinks } from '#ionic-native/deeplinks';
#Component({
templateUrl: 'app.html'
})
export class MyApp {
#ViewChild(Nav) nav: Nav;
rootPage: any = HomePage;
pages: Array<{title: string, component: any}>;
constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, public deeplinks: Deeplinks) {
this.initializeApp();
// used for an example of ngFor and navigation
this.pages = [
{ title: 'Home', component: HomePage },
{ title: 'List', component: ListPage }
];
}
initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
this.statusBar.styleDefault();
this.splashScreen.hide();
this.deeplinks.routeWithNavController(this.nav, {}).subscribe((match) => {
if (match.$link.path == "/list") {
this.nav.setRoot(ListPage);
}
}, (nomatch) => {});
});
}
openPage(page) {
// Reset the content nav to have just this page
// we wouldn't want the back button to show in this scenario
this.nav.setRoot(page.component);
}
}