Fixes for #298 #299 #300 in TransferStateService (#301)

* fix: use urlAfterRedirects to load prerendered content #299

prevent loading content for the page that user is not going to end up at
but instead actually load content for page where user will end up after navigation

* fix: fix loading of content for the root route #298

* fix: prevent flicker of content when navigating to the root route #300

* refactor(ng-lib): simplify #300 fix

* fix(ng-lib): fallback to url when urlAfterRedirects is unspecified

Author: BlindDespair

projects/scullyio/ng-lib/src/lib/transfer-state/transfer-state.service.ts

@@ -16,6 +16,7 @@ import {
 } from 'rxjs/operators';
 import {fetchHttp} from '../utils/fetchHttp';
 import {isScullyGenerated, isScullyRunning} from '../utils/isScully';
+import {mergePaths} from '../utils/merge-paths';
 
 const SCULLY_SCRIPT_ID = `scully-transfer-state`;
 const SCULLY_STATE_START = `/** ___SCULLY_STATE_START___ */`;
@@ -60,7 +61,7 @@ export class TransferStateService {
         first()
       )
     ),
-    map((ev: NavigationEnd) => ev.url),
+    map((ev: NavigationEnd) => ev.urlAfterRedirects || ev.url),
     shareReplay(1)
   );
 
@@ -80,7 +81,10 @@ export class TransferStateService {
     } else if (isScullyGenerated()) {
       // On the client AFTER scully rendered it
       this.initialUrl = window.location.pathname || '__no_NO_no__';
-      this.initialUrl = this.initialUrl.endsWith('/') ? this.initialUrl.slice(0, -1) : this.initialUrl;
+      this.initialUrl =
+        this.initialUrl !== '/' && this.initialUrl.endsWith('/')
+          ? this.initialUrl.slice(0, -1)
+          : this.initialUrl;
       /** set the initial state */
       this.stateBS.next((window && window[SCULLY_SCRIPT_ID]) || {});
     }
@@ -140,7 +144,7 @@ export class TransferStateService {
         takeWhile(url => base(url) === this.currentBaseUrl),
         switchMap(url =>
           // Get the next route's page from the server
-          fetchHttp<string>(url + '/index.html', 'text').catch(err => {
+          fetchHttp<string>(mergePaths(url, '/index.html'), 'text').catch(err => {
             console.warn('Failed transfering state from route', err);
             return '';
           })

projects/scullyio/ng-lib/src/lib/utils/merge-paths.spec.ts

@@ -0,0 +1,19 @@
+import {mergePaths} from './merge-paths';
+
+describe('mergePaths', () => {
+  it('should return correct concatenated path', () => {
+    expect(mergePaths('/about', '/index.html')).toBe('about/index.html');
+  });
+
+  it('should return correct concatenated path when base ends with slash and path starts with slash', () => {
+    expect(mergePaths('/about/', '/index.html')).toBe('about/index.html');
+  });
+
+  it('should return correct concatenated path when base does not end with slash and path does not start with slash', () => {
+    expect(mergePaths('/about', 'index.html')).toBe('about/index.html');
+  });
+
+  it('should return correct concatenated path when base is a slash and path does not start with slash', () => {
+    expect(mergePaths('/', '/index.html')).toBe('/index.html');
+  });
+});

projects/scullyio/ng-lib/src/lib/utils/merge-paths.ts

@@ -0,0 +1,9 @@
+export function mergePaths(base: string, path: string): string {
+  if (base.endsWith('/') && path.startsWith('/')) {
+    return `${base}${path.substr(1)}`;
+  }
+  if (!base.endsWith('/') && !path.startsWith('/')) {
+    return `${base}/${path}`;
+  }
+  return `${base}${path}`;
+}