How to use DeepLinker in browser?

Anyone figured out how to use DeepLinker in browser? E.g. navigate to a specific page by an URL with parameters.

I’ve configured DeepLinked config and URL is updated after # when navigating but when I hit “refresh” or open a new window with same URL it jumps to a home page. I’m expecting to stay on the same let’s say /#/deails/123 page and probably with a stack of pages defined in defaultHistory.

In console I’m getting:

plugin.js:33 Native: tried calling Deeplinks.routeWithNavController, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator

app.component.ts:46 Unmatched Route cordova_not_available

I’ve added:
< !–cordova.js required for cordova apps-- >
< script src=“cordova.js” >< /script >
But it’s an empty file with content:

// mock cordova file during development

I call Deeplinks from ionic-native on platform.ready() as:
Deeplinks.routeWithNavController(this.nav, {}).subscribe(...);

Will appreciate any directions. A working example would be even better!

1 Like

This is how I do it currently.

I’ve noticed the Deeplinker works as expected when deployed to PROD.

So seems it’s an issue with development mode. I guess docs should be updated.

No need to call Deeplinks.routeWithNavController manually.

Still needto make ti working in local dev.

Hi Asterus, we are also facing the same issue! Can you please explain how do you deploy ionic app to prod for browser. We are developing PWA using ionic.

I added “browser” platform and compile project as:

ionic build browser --prod

Then deploy to my servers.

Actually deeplinking started to work in local dev server as well - but I don’t know what exactly I’ve changed to make it working. I’ve been doing a lot of cleanup to remove my old custom navigation code. Probably there were some issues.

You can see how it works here: https://debtstracker.io/en/
Direct link to app to see deep linking work - https://debtstracker.io/app/web.html - currently an issue with dalayed URL update in tab switch - worked just few hours back :frowning: - may be it’s RC5 issue (just updated to latest).

I’m heading for vacation on Friday so I afraid I would not be able to provide more details at the moment.

If it does not work for you try from scratch.

Thanks Asterus. We got it working!

I finally got DeepLinker/Urls-without-Hash working in Ionic2 , successfully tested in the WebApp and AndroidApp.

For those looking for getting DeepLinker/Urls-without-Hash to work in Ionic2 (“ionic-angular”: “2.0.0”, “ionic-native”: “2.4.1”):

  1. Install plugin
    ionic plugin add ionic-plugin-deeplinks --variable URL_SCHEME=myapp --variable DEEPLINK_SCHEME=https --variable DEEPLINK_HOST=example.com
    (see also https://github.com/driftyco/ionic-plugin-deeplinks)

  2. src/app/app.module.ts --> gets webapp working
    import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; import { APP_BASE_HREF } from '@angular/common'; ... @NgModule({ ... imports: [ IonicModule.forRoot(MyApp, { locationStrategy: 'path' }, // so no hash# has to be used // for webapp, e.g.: example.com/map { links: [ { component: MapPage, name: 'Map', segment: 'map' } ] } ) ], ... providers: [{... // use this instead of <base href="/"> in index.html, as this seems to break the android native version (white screen) ,{provide: APP_BASE_HREF, useValue: '/'} ] })

  3. src/app/app.component.ts --> gets native app working (tested on android)
    import { StatusBar, Splashscreen, Deeplinks } from 'ionic-native'; ... @ViewChild(Nav) navChild:Nav; initializeApp() { this.platform.ready().then(() => { // url/deeplink routing for native apps Deeplinks.routeWithNavController(this.navChild, { '/map': MapPage, }).subscribe((match) => { console.log('Successfully matched route', match); }, (nomatch) => { console.error('Got a deeplink that didn\'t match', nomatch); }); }); }

  4. To make your Webserver redirect “subdirectories” in the URL to your app, the URLs have to be rewritten… I guess this is the only way to get Routing without the Hash (example.com/#/map) working… e.g. .htaccess in Apache:
    <IfModule mod_rewrite.c> Options Indexes FollowSymLinks RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] </IfModule>

I tried several combinations of configuration (described here, here and in this thread)… this was the only working combination I found.

Hope it helps!

Cheers
Arno

2 Likes

you can follow old docs about Deeplinker here https://ionicframework.com/docs/2.3.0/api/navigation/DeepLinker/ .
it works well in my project (I am using ionic-angular@3.1.2)

imports: [
   IonicModule.forRoot(MyApp, {}, {
     links: [
      { component: HomePage, name: 'Home', segment: 'home' },
      { component: DetailPage, name: 'Detail', segment: 'detail/:userId' }
    ]
  })
 ]
2 Likes

is it working without (hash)? how did you get it?

In my case I use hash.

But when I tried locationStrategy path it’s work well, I can achieve without hash.

here is the code sample (I am using ionic-angular@3.1.2) :

imports: [
   IonicModule.forRoot(MyApp, {
      locationStrategy: 'path'
   }, {
     links: [
      { component: HomePage, name: 'Home', segment: 'home' },
      { component: DetailPage, name: 'Detail', segment: 'detail/:userId' }
    ]
  })
 ]
3 Likes

works like a charm, better than dynamic IonicPage decorator!

hello sir
can you please help me how to use that in ionic-angular 3.9.2 and lazy loading. ?

I am getting an error when I refresh the page, Cannot GET [PAGE_PATH].

How to fix this?

@ipe_himanshu did you find a solution with lazy loading? I am facing the same problem. Thank you!

Seem, Ionic latest is not supporting Deeplinks for WEB with Lazy loading? Any advice? Thanks