Error in Success callbackId: IonicDeeplinkPlugin297951451 : TypeError: route.split is not a function

user_12369018 0
Viewed 731

I'm trying to open specific URL into an ionic app...

The whole setup to open "general" URLs it's done and running so good, but now the thing is about to open specific URLs.

I have this function in app.component.ts:

setupDeepLinks(){
    this.deepLinks.route({
      '/event-detail/:id':EventDetailPage,
      '/search':SearchPage
    }).subscribe(match => {
      alert(JSON.stringify(match));
    },noMatch => {
      alert(JSON.stringify(noMatch));
    });
  }

The entire info about this, says that this is the right way, even the official info from ionic deepLinking...

Opening the DevTools from Chrome I got this error, but I don't know what to do...

enter image description here

I'm working with ionic6

Solution

setupDeepLinks(){
    this.deepLinks.route({
      '/:id':'/event-detail',
      '':'/search'
    }).subscribe(match => {
      console.log('Success: ', match);
      const internalPath = `/${match.$route}/${match.$args['id']}`;
      this.zone.run(()=>{
        this.router.navigateByUrl(internalPath);
      });
    },noMatch => {
      console.error('Error: ', noMatch);
    });
  }

Actually it was something really easy, but I didn't found this anywhere.

The routes must be builded like this:

'/:id':'/event-detail',
'':'/search'

When the route expect an ID, the first part of the array it has to looks like this: '/:id' and the second part of the array like this: '/event-detail'

The second part of the array is the name that it's placed on the app-routing.module.ts

When the route doesn't expect anything, the first part of the array it has to be empty and the second part of the array like this: '/search'

I hope this help somebody else.

ionic-framework angular deep-linking
2 Answers

I was getting the same thing, but if you follow the DevDactic tutorial and watch Simon on the YouTube video from 4m 40s in, you'll hear him say that the explicit page routing doesn't work too well in Ionic 4/5.

His suggestion is to do it this way:

setupDeepLinks(){
    this.deepLinks.route({
      '/event-detail/:id': 'EventDetailPage',
      '/search':SearchPage
    }).subscribe(match => {
      alert(JSON.stringify(match));
    },noMatch => {
      alert(JSON.stringify(noMatch));
    });
  }

Where the EventDetailPage in your code is enclosed in quotes. I found that the error you've indicated stopped, but I'm still struggling to make any headway in getting the route to "match".

Please let me know if you make it work?

Thanks.

user_35085670

I had the same issue with ionic 4+ and @MarcoRo and @Capnross solutions did not work. And most importantly, I have multiple routes with parameters. So the work around that worked for me is as given below.

        this.deeplinks.route({
        // this route is intentionally made invalid but it's important 
        //to have the page i.e anyPage in this case as quoted string : "anyPage" . 
       //This is why the plugin throws route.split() not a function error  

       '/:id':"anyPage"
    
      }).subscribe((match) => {

       // route not match so nothing to do here

      }, (nomatch) => {
        /* nomatch contains the full object of the incoming url
        so I can easily extract the needed part for navigation 
        and simply use angular router to navigate to it 
        */
     
      this.router.navigateByUrl(nomatch.$link.path)

    });
  })

The idea is to supply a random object that does not exit in the route .

Like I said, this is work around until a permanent fix is made for ionic 4 and 5. I hope this saves someones time as I have been on it for hours before finally got to hack it.

user_13631690
Related