fix(aio): strip leading slashes from path (and improve DRY-ness) (angular#16238)

Previously, the path returned by `LocationService.path()` preserved leading
slashes, which resulted in requests with consequtive slashes in the URL. Such
requests would fail (with a 404) on staging.

This commit fixes it, by removing leading slashes from the path. It also
refactors `LocationService` a bit, converting path to an observable,
`currentPath` (similar to `currentUrl`), and applies certain clean-ups (e.g.
stripping slashes, query, hash) in one place, which simplifies consumption.

Closes angular#16230

Author: gkalpak

aio/src/app/app.component.ts

@@ -76,7 +76,7 @@ export class AppComponent implements OnInit {
     });
 
     // scroll even if only the hash fragment changed
-    this.locationService.currentUrl.subscribe(url => this.autoScroll());
+    this.locationService.currentUrl.subscribe(() => this.autoScroll());
 
     this.navigationService.currentNode.subscribe(currentNode => {
       this.currentNode = currentNode;

aio/src/app/documents/document.service.ts

@@ -39,7 +39,7 @@ export class DocumentService {
     private http: Http,
     location: LocationService) {
     // Whenever the URL changes we try to get the appropriate doc
-    this.currentDocument = location.currentUrl.switchMap(() => this.getDocument(location.path()));
+    this.currentDocument = location.currentPath.switchMap(path => this.getDocument(path));
   }
 
   private getDocument(url: string) {

aio/src/app/embedded/current-location.component.spec.ts

@@ -1,18 +1,19 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { LocationService } from 'app/shared/location.service';
+import { MockLocationService } from 'testing/location.service';
 import { CurrentLocationComponent } from './current-location.component';
 
-let currentPath: string;
-class MockLocation {
-  path() { return currentPath; }
-}
 
 describe('CurrentLocationComponent', () => {
+  let locationService: MockLocationService;
+
   beforeEach(async(() => {
+    locationService = new MockLocationService('initial/url');
+
     TestBed.configureTestingModule({
       declarations: [ CurrentLocationComponent ],
       providers: [
-        { provide: LocationService, useClass: MockLocation }
+        { provide: LocationService, useValue: locationService }
       ]
     });
     TestBed.compileComponents();
@@ -21,8 +22,13 @@ describe('CurrentLocationComponent', () => {
   it('should render the current location', () => {
     const fixture = TestBed.createComponent(CurrentLocationComponent);
     const element: HTMLElement = fixture.nativeElement;
-    currentPath = 'a/b/c';
+
+    fixture.detectChanges();
+    expect(element.innerText).toEqual('initial/url');
+
+    locationService.urlSubject.next('next/url');
+
     fixture.detectChanges();
-    expect(element.innerText).toEqual('a/b/c');
+    expect(element.innerText).toEqual('next/url');
   });
 });

aio/src/app/embedded/current-location.component.ts

@@ -7,7 +7,7 @@ import { LocationService } from 'app/shared/location.service';
  */
 @Component({
   selector: 'current-location',
-  template: '{{location.path()}}'
+  template: '{{ location.currentPath | async }}'
 })
 export class CurrentLocationComponent {
   constructor(public location: LocationService) {

aio/src/app/navigation/navigation.service.spec.ts

@@ -178,9 +178,6 @@ describe('NavigationService', () => {
       locationService.go('c');
       expect(currentNode).toEqual(cnode, 'location: c');
 
-      locationService.go('c/');
-      expect(currentNode).toEqual(cnode, 'location: c/');
-
       locationService.go('c#foo');
       expect(currentNode).toEqual(cnode, 'location: c#foo');
 

aio/src/app/navigation/navigation.service.ts

@@ -16,14 +16,6 @@ export { CurrentNode, NavigationNode, NavigationResponse, NavigationViews, Versi
 
 const navigationPath = 'content/navigation.json';
 
-const urlParser = document.createElement('a');
-function cleanUrl(url: string) {
-  // remove hash (#) and query params (?)
-  urlParser.href = '/' + url;
-  // strip leading and trailing slashes
-  return urlParser.pathname.replace(/^\/+|\/$/g, '');
-}
-
 @Injectable()
 export class NavigationService {
   /**
@@ -91,10 +83,9 @@ export class NavigationService {
   private getCurrentNode(navigationViews: Observable<NavigationViews>): Observable<CurrentNode> {
     const currentNode = combineLatest(
       navigationViews.map(this.computeUrlToNavNodesMap),
-      this.location.currentUrl,
+      this.location.currentPath,
       (navMap, url) => {
-        let urlKey = cleanUrl(url);
-        urlKey = urlKey.startsWith('api/') ? 'api' : urlKey;
+        const urlKey = url.startsWith('api/') ? 'api' : url;
         return navMap[urlKey] || { view: '', url: urlKey, nodes: [] };
       })
       .publishReplay(1);