Ionic 4 Deeplink plugin return false route not matched

Viewed 1595

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.

2 Answers

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));
  });

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

Related