petebacondarwin · Mar 21, 2016 · Mar 4, 2016 · Mar 21, 2016 · Mar 21, 2016
diff --git a/modules/angular1_router/build.js b/modules/angular1_router/build.js
@@ -40,8 +40,10 @@ function main(modulesDirectory) {
     return prev + transform(fs.readFileSync(dir + file, 'utf8'));
   }, '');
 
-  var out = moduleTemplate.replace('//{{FACADES}}', facades)
-                .replace('//{{SHARED_CODE}}', sharedCode);
+  // we have to use a function callback for replace to prevent it from interpreting `$`
+  // as a replacement command character
+  var out = moduleTemplate.replace('//{{FACADES}}', function() { return facades; })
+                .replace('//{{SHARED_CODE}}', function() { return sharedCode; });
   return PRELUDE + transform(directives) + out + POSTLUDE;
 }
 

diff --git a/modules/angular1_router/lib/facades.es5 b/modules/angular1_router/lib/facades.es5
@@ -316,3 +316,9 @@ Location.prototype.path = function () {
 Location.prototype.go = function (path, query) {
   return $location.url(path + query);
 };
+Location.prototype.prepareExternalUrl = function(url) {
+  if (url.length > 0 && !url.startsWith('/')) {
+    url = '/' + url;
+  }
+  return $location.$$html5 ? '.' + url : '#' + $locationHashPrefix + url;
+};
diff --git a/modules/angular1_router/src/module_template.js b/modules/angular1_router/src/module_template.js
@@ -4,9 +4,33 @@ angular.module('ngComponentRouter').
     // Because Angular 1 has no notion of a root component, we use an object with unique identity
     // to represent this. Can be overloaded with a component name
     value('$routerRootComponent', new Object()).
-    factory('$rootRouter', ['$q', '$location', '$browser', '$rootScope', '$injector', '$routerRootComponent', routerFactory]);
 
-function routerFactory($q, $location, $browser, $rootScope, $injector, $routerRootComponent) {
+    // Unfortunately, $location doesn't expose what the current hashPrefix is
+    // So we have to monkey patch the $locationProvider to capture this value
+    provider('$locationHashPrefix', ['$locationProvider', $locationHashPrefixProvider]).
+    factory('$rootRouter', ['$q', '$location', '$browser', '$rootScope', '$injector', '$routerRootComponent', '$locationHashPrefix', routerFactory]);
+
+function $locationHashPrefixProvider($locationProvider) {
+
+  // Get hold of the original hashPrefix method
+  var hashPrefixFn = $locationProvider.hashPrefix.bind($locationProvider);
+
+  // Read the current hashPrefix (in case it was set before this monkey-patch occurred)
+  var hashPrefix = hashPrefixFn();
+
+  // Override the helper so that we can read any changes to the prefix (after this monkey-patch)
+  $locationProvider.hashPrefix = function(prefix) {
+    if (angular.isDefined(prefix)) {
+      hashPrefix = prefix;
+    }
+    return hashPrefixFn(prefix);
+  }
+
+  // Return the final hashPrefix as the value of this service
+  this.$get = function() { return hashPrefix; };
+}
+
+function routerFactory($q, $location, $browser, $rootScope, $injector, $routerRootComponent, $locationHashPrefix) {
 
   // When this file is processed, the line below is replaced with
   // the contents of `../lib/facades.es5`.

diff --git a/modules/angular1_router/src/ng_outlet.ts b/modules/angular1_router/src/ng_outlet.ts
@@ -207,13 +207,13 @@ function ngLinkDirective($rootRouter, $parse) {
       return;
     }
 
-    let instruction = null;
+    let navigationInstruction = null;
     let link = attrs.ngLink || '';
 
     function getLink(params) {
-      instruction = router.generate(params);
+      navigationInstruction = router.generate(params);
 
-      scope.$watch(function() { return router.isRouteActive(instruction); },
+      scope.$watch(function() { return router.isRouteActive(navigationInstruction); },
                    function(active) {
                      if (active) {
                        element.addClass('ng-link-active');
@@ -222,7 +222,8 @@ function ngLinkDirective($rootRouter, $parse) {
                      }
                    });
 
-      return './' + angular.stringifyInstruction(instruction);
+      const navigationHref = navigationInstruction.toLinkUrl();
+      return $rootRouter._location.prepareExternalUrl(navigationHref);
     }
 
     let routeParamsGetter = $parse(link);
@@ -236,11 +237,11 @@ function ngLinkDirective($rootRouter, $parse) {
     }
 
     element.on('click', event => {
-      if (event.which !== 1 || !instruction) {
+      if (event.which !== 1 || !navigationInstruction) {
         return;
       }
 
-      $rootRouter.navigateByInstruction(instruction);
+      $rootRouter.navigateByInstruction(navigationInstruction);
       event.preventDefault();
     });
   }