How to use the same Component view at multiple URLs in Ionic 2’s DeepLinker?

@Overton wrote:

I’m trying to achieve the following configuration in my Ionic (3.9.2) app using the Ionic 2 DeepLinker, where I have regular versions of my pages at index.html, /terms, and /card, and differently styled versions at /club/index.html, /club/terms and /club/card:

  @NgModule({ 
  declarations: MyComponents, 
  imports: [ 
    BrowserModule, 
    HttpClientModule, 
    // DeepLinker!!
    IonicModule.forRoot(MyApp, { locationStrategy : 'path' }, { 
    links : [ 
      { component : HomePage, name : 'Home', segment : '' }, 
      { component : TermsPage, name : 'Terms of Use', segment : 'terms' }, 
      { component : CardPage, name : 'Savings Card', segment : 'card' },
     // Club Aliases; these pages will have the same content as above, but slightly different styles, defined elsewhere.
      { component : HomePage, name : 'Home', segment : 'club' } 
      { component : TermsPage, name : 'Terms of Use', segment : 'club/terms' }, 
      { component : CardPage, name : 'Savings Card', segment : 'club/card' },
  ...

Is there a way to achieve this using the Ionic 2 DeepLinker?

Some notes:

We navigate to pages by following links (and preventing default):

<a href="/terms" (click)="openPage('TermsPage', $event)">Terms of Use</a>

where openPage pushes a page onto the nav stack using NavController’s Nav Component, like so:

$event.preventDefault();
this.nav.push(page.component, params);

We also had to setup our webserver to rewrite subdirectories (e.g. “/terms”) to index.html. Info: https://github.com/ionic-team/ionic/issues/10565#issuecomment-282659179

And I also forked @ionic-app-scripts to get this (rewrite to index.html) working on my local development (e.g. live reload) server:
https://github.com/senseijames/ionic-app-scripts

Environment info:

cli packages:
@ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
global packages:
cordova (Cordova CLI) : 8.0.0
Gulp CLI : CLI version 3.9.1 Local version 3.9.1

local packages:
@ionic/app-scripts : 3.1.9
Cordova Platforms : android 7.0.0 browser 5.0.3 ios 4.5.4
Ionic Framework : ionic-angular 3.9.2
System:
ios-deploy : 1.9.2
ios-sim : 6.1.2
Node : v8.9.4
npm : 5.6.0
OS : macOS High Sierra
Xcode : Xcode 9.3 Build version 9E145

Posts: 1

Participants: 1

Read full topic