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: Linking to a deep link fails when used with "path" URL strategy · Issue #10565 · ionic-team/ionic-framework · GitHub
And I also forked @ionic-app-scripts to get this (rewrite to index.html) working on my local development (e.g. live reload) server:
GitHub - senseijames/ionic-app-scripts: App Build Scripts for Ionic Projects
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.1local 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