account for base href in deep linker

use APP_BASE_HREF when generating urls from within deep linker

resolves ionic-team#10076
resolves ionic-team#10565

Author: soumak77

src/module.ts

@@ -446,7 +446,7 @@ export class IonicModule {
         { provide: ModuleLoader, useFactory: provideModuleLoader, deps: [NgModuleLoader, Injector]},
         { provide: LocationStrategy, useFactory: provideLocationStrategy, deps: [ PlatformLocation, [new Inject(APP_BASE_HREF), new Optional()], Config ] },
         { provide: UrlSerializer, useFactory: setupUrlSerializer, deps: [ App, DeepLinkConfigToken ] },
-        { provide: DeepLinker, useFactory: setupDeepLinker, deps: [ App, UrlSerializer, Location,  ModuleLoader, ComponentFactoryResolver ] },
+        { provide: DeepLinker, useFactory: setupDeepLinker, deps: [ App, UrlSerializer, Location,  ModuleLoader, ComponentFactoryResolver, [new Inject(APP_BASE_HREF), new Optional()] ] },
       ]
     };
   }

src/navigation/deep-linker.ts

@@ -1,6 +1,5 @@
 import { ComponentFactory, ComponentFactoryResolver } from '@angular/core';
 import { Location } from '@angular/common';
-
 import { App } from '../components/app/app';
 import { DIRECTION_BACK, NavLink, NavSegment, TransitionDoneFn, convertToViews, isNav, isTab, isTabs } from './nav-util';
 import { ModuleLoader } from '../util/module-loader';
@@ -27,23 +26,24 @@ export class DeepLinker {
     public _serializer: UrlSerializer,
     public _location: Location,
     public _moduleLoader: ModuleLoader,
-    public _baseCfr: ComponentFactoryResolver
+    public _baseCfr: ComponentFactoryResolver,
+    public _baseHref: string
   ) {}
 
   /**
    * @internal
    */
   init() {
     // scenario 1: Initial load of all navs from the initial browser URL
-    const browserUrl = normalizeUrl(this._location.path());
+    const browserUrl = normalizeUrl(this._location.path(), this._baseHref);
     console.debug(`DeepLinker, init load: ${browserUrl}`);
 
     // remember this URL in our internal history stack
     this._historyPush(browserUrl);
 
     // listen for browser URL changes
     this._location.subscribe((locationChg: { url: string }) => {
-      this._urlChange(normalizeUrl(locationChg.url));
+      this._urlChange(normalizeUrl(locationChg.url, this._baseHref));
     });
   }
 
@@ -120,7 +120,7 @@ export class DeepLinker {
 
   getCurrentSegments(browserUrl?: string) {
     if (!browserUrl) {
-      browserUrl = normalizeUrl(this._location.path());
+      browserUrl = normalizeUrl(this._location.path(), this._baseHref);
     }
     return this._serializer.parse(browserUrl);
   }
@@ -290,7 +290,7 @@ export class DeepLinker {
    * @internal
    */
   getSegmentByNavIdOrName(navId: string, name: string): NavSegment {
-    const browserUrl = normalizeUrl(this._location.path());
+    const browserUrl = normalizeUrl(this._location.path(), this._baseHref);
     const segments = this._serializer.parse(browserUrl);
     for (const segment of segments) {
       if (segment.navId === navId || segment.navId === name) {
@@ -433,19 +433,22 @@ export class DeepLinker {
 }
 
 
-export function setupDeepLinker(app: App, serializer: UrlSerializer, location: Location, moduleLoader: ModuleLoader, cfr: ComponentFactoryResolver) {
-  const deepLinker = new DeepLinker(app, serializer, location, moduleLoader, cfr);
+export function setupDeepLinker(app: App, serializer: UrlSerializer, location: Location, moduleLoader: ModuleLoader, cfr: ComponentFactoryResolver, baseHref: string) {
+  const deepLinker = new DeepLinker(app, serializer, location, moduleLoader, cfr, baseHref);
   deepLinker.init();
   return deepLinker;
 }
 
 
-export function normalizeUrl(browserUrl: string): string {
+export function normalizeUrl(browserUrl: string, baseHref: string = '/'): string {
   browserUrl = browserUrl.trim();
   if (browserUrl.charAt(0) !== '/') {
     // ensure first char is a /
     browserUrl = '/' + browserUrl;
   }
+  if (!browserUrl.startsWith(baseHref)) {
+    browserUrl = baseHref + browserUrl;
+  }
   if (browserUrl.length > 1 && browserUrl.charAt(browserUrl.length - 1) === '/') {
     // ensure last char is not a /
     browserUrl = browserUrl.substr(0, browserUrl.length - 1);

src/util/mock-providers.ts

@@ -394,7 +394,7 @@ export function mockDeepLinker(linkConfig: DeepLinkConfig = null, app?: App) {
   let serializer = new UrlSerializer(app, linkConfig);
   let location = mockLocation();
 
-  return new DeepLinker(app || mockApp(), serializer, location, null, null);
+  return new DeepLinker(app || mockApp(), serializer, location, null, null, '/');
 }
 
 export function mockNavController(): NavControllerBase {
@@ -451,7 +451,7 @@ export function mockOverlayPortal(app: App, config: Config, plt: MockPlatform):
   let gestureCtrl = new GestureController(app);
   let serializer = new UrlSerializer(app, null);
   let location = mockLocation();
-  let deepLinker = new DeepLinker(app, serializer, location, null, null);
+  let deepLinker = new DeepLinker(app, serializer, location, null, null, '/');
 
   return new OverlayPortal(
     app,

src/util/util.ts

@@ -53,10 +53,10 @@ export function debounce(fn: Function, wait: number, immediate: boolean = false)
  * @hidden
  * Rewrites an absolute URL so it works across file and http based engines
  */
-export function normalizeURL(url: string): string {
+export function normalizeURL(url: string, baseHref: string = '/'): string {
   const ionic = (<any>window)['Ionic'];
   if (ionic && ionic.normalizeURL) {
-    return ionic.normalizeURL(url);
+    return ionic.normalizeURL(url, baseHref);
   }
   return url;
 }