Ionic 4 Deeplink plugin return false route not matched

Question

I am Implementing Deeplink in ionic 4 application. Application in getting launched but deeplink plugin always returns false;

app.routing.ts:

{
    path: 'viewdiary/:id/public',    
    loadChildren: () => import('./pages/viewdiary/viewdiary.module').then( m => m.ViewdiaryPageModule)
  },

app.compoent.ts:

setupDeepLink(){
    this.deeplinks.route({
      '/viewdiary/:id/public': 'viewdiary/:id/public'
    }).subscribe((match)=>{
      console.log('deeplink matched', match);
      const internalPath = `${match.$route}/${match.$args['id']}/${match.$route}`;
      console.log(internalPath);
      this.zone.run(()=>{
        this.general.goToPage(internalPath);
      });
    },
    nomatch=>{
      // nomatch.$link - the full link data
      console.error("Got a deeplink that didn't match", nomatch);
    })
  };

My Public diary Page link is 'https://www.example.com/diary/12542/public'; it looks like a routing issue tried many thing changes names but nothing works. I am clueless what going wrong.

Restore

Are you running setupDeepLink () inside a platform.ready callback ? – Stash

Yes. it is inside patform.ready and it is working and checking deeplink. But the issue is it always return match not found. – Restore

I may be dumb but shouldn't the link be 'https://www.example.com/viewdiary/12542/public' – Darkish

@Darkish i have tried it as well. I did change URL and routing names etc etc. – Restore

Answer 1

Figured out how to achieve it with the help of Another Answer on Stackoverflow

import { Platform, NavController } from '@ionic/angular';

constructor(public navCtrl: NavController){}


this.deeplinks.routeWithNavController(this.nav, {
    '/viewdiary/:diary/:id/:public': 'viewdiary'
  }).subscribe((match) => {
       console.log('success' + JSON.stringify(match));
  }, (noMatch) => {          
       console.log('error' + JSON.stringify(noMatch));
  });

Restore

Answer 2

For me, this approach did not work either. So, in my application I handle deep links as follows:

const {App}: { App: AppPlugin } = Plugins;
...

export class AppComponent {
    private setupDeepLinks(): void {
        App.addListener('appUrlOpen', (data: any) => {
            this.ngZone.run(() => {
                // Example url: https://my-domain.com/tabs/tab2
                // slug = /tabs/tab2
                const slug = data.url.split('my-domain.com').pop();
                if (slug) {
                    this.router.navigateByUrl(slug);
                }
            });
        });
    }
}

Or you can implement your own more complex logic inside the listener if needed

Sweeney

i think it is for Capacitor right? i am using cordova! so if you can help me with cordova it will be good. – Restore

It should be pretty similar. Let me check – Sweeney

@NajamUsSaqib, did you try routeWithNavController instead of route? – Sweeney

No. let me try with this. – Restore

still same error with routeWithNavController ; – Restore

Did you setup plugin correctly? I means this line cordova plugin add ionic-plugin-deeplinks --variable URL_SCHEME=myapp --variable DEEPLINK_SCHEME=https --variable DEEPLINK_HOST=example.com --variable ANDROID_PATH_PREFIX=/ – Sweeney

Also did you add universal-links to your config.xml? – Sweeney

Did you check the differences between your project configuration and demo project github.com/ionic-team/ionic2-deeplinks-demo ? – Sweeney

i checked it before and it is way too old. But i will again check it. – Restore