Deeplink with parameter not working

[dominikstrasser]

Hey.

I'm trying to get Deeplinks working in my Ionic App (currently only IOS) but it is quite unstable.

So basically i have two routes

this.deeplinks.route({
   '/referral/:id': 'ReferralPage',
   '/settings': 'SettingsPage'
})

Deeplink:

sleep-app://referral/code-1

It works without problems for the Settings Page. But the ReferralPage with the Parameter is not working. I tried to debug the deeplink.js but since there wasn't a change in about a year there might was a change in an dependency.

Can someone approve parameters via :id are not working? Has anybody an idea how to solve this issue?

Current Solution

I have a workaround by just using the '/referral': 'ReferalPage' route and call the app with this Deeplink sleep-app://referral?id=code-1.

In the subscribe i call this.nav.push(match.$route, match.$args);

It works, but the path/:id part is currently broken...

[ArthurKnoep]

Same problem

[newelement]

Yes, adding a parameter causes the view to fail. Any update on this?

[ArthurKnoep]

Currently, I use the workaround propose by @dominikstrasser which work fine

[topalavlad]

@dominikstrasser - I've tried using your workaround, but this means when going back, I have to press the back button twice. Am I doing something wrong?

Also, I tried debugging this by changing the minified sources with the code from here but didn't have much luck. Do you guys know if there's any tutorial on debugging ionic/cordova plugins?

[sburnicki]

I debugged the issue on android and found the code in _getRealPath to be the cause of this confusion: https://github.com/ionic-team/ionic-plugin-deeplinks/blob/e181c24ca3c4059245b2493fe377ecea0c506e0a/www/deeplink.js#L189

Explanation

An URL like sleep-app://referral/code-1 is split in three parts, which are all contained in data:

{
  extra: {},
  host: "referral",
  path: "/code-1",
  scheme: "sleep-app",
  url: "sleep-app://referral/code-1"
}

The code line mentioned above uses the host for matching, if there is no path, as in sleep-app://settings. Otherwise it takes the path without query parameters, i.e. /code-1 for matching.

Another Workaround

If you always provide a host in the URL, it won't be used for matching against the routes. It doesn't even matter which host you use.

So sleep-app://foobar/referral/code-1 should match /referral/:id and sleep-app://foobar/settings should match /settings, the routes @dominikstrasser initially defined.

With this workaround you can use routeWithNavController.

[calvinte]

That was a frustrating day of poking about. @sburnicki's workaround worked for me. It should be noted this is not touched on in http://blog.ionicframework.com/deeplinking-in-ionic-apps/

[cjdreiss]

For me on iOS at least, I had the same problem. It was driving me nuts.

This code, calling myapp://set-token/sometoke1234 would not do anything once the app loads. it would console log On deep link along with the details of the route that was passed, but it doesn't resolve the promise and nothing in the subscription method would be called. If one didn't match, the error would be thrown.

 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.route({
        '/set-token/:token': 'LoginPage',
        '/meetings-list': 'MeetingsListPage'
      }).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);
        console.log(match.$route);
        this.nav.setRoot(match.$route, match.$args);
      }, (nomatch) => {
        // nomatch.$link - the full link data
        console.error('Got a deeplink that didn\'t match', nomatch);
      });

    });
  }

This code works and will pass url params, so I need to make my url be myapp://set-token?token=sometokenhere. Its not ideal, but at least it works.

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.route({
        '/set-token': 'LoginPage',
        '/meetings-list': 'MeetingsListPage'
      }).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);
        console.log(match.$route);
        this.nav.setRoot(match.$route, match.$args);
      }, (nomatch) => {
        // nomatch.$link - the full link data
        console.error('Got a deeplink that didn\'t match', nomatch);
      });

    });

[sburnicki]

@cjdreiss Have you tried using myapp://something/some-token/sometoken1234 as a link with your first code block?

[daem0ndev]

I'm seeing an issue where once I come in via custom url scheme link, lazy loading pages no longer works because the location.href inside the app changes. It normally has a full filesystem path to www/index.html after localhost:8080/ but once I come in via the custom scheme url, e.g. "app://my-callback-route", the location.href is now localhost:8080/my-call-back-route and then the next .js it tries to lazy load gets a 404.

This is on iOS, not sure how it plays out on android right now, but is anyone else having an issue with deep links with custom app scheme url + lazy loading pages? my pages lazy load just fine up until I come in via a deep link

[b-d-m-p]

I'm having a similar problem, and both the solutions mentioned are not working for me. All the links I use match even if they don't exist.

[staywithme23]

solved by @sburnicki solution of 'Another Workaround'. Big thx. solved by putting dummy host. Running on iPhone XR, XCode 10

//URL Schema
//working
myapp://anything/referral/any-code

//not working
myapp://referral/any-code