How to use DeepLinker in browser?

Ionic Framework ionic-v3
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