How to use DeepLinker in browser?

Ionic Framework ionic-v3
1

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
2

This is how I do it currently.

3

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.

4

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.

5

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.

6

Thanks Asterus. We got it working!

7

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
8

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
9

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

10

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
11

works like a charm, better than dynamic IonicPage decorator!

12

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

13

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

How to fix this?

14

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

15

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