feat(docs): 404 routing with localStorage

404.html

@@ -8,10 +8,27 @@
     <link rel="icon" type="image/x-icon" href="favicon.ico">
     <script>
         const serverSlash = 5;
-        const route = location.href.split("/");
+        const nextRoute = location.href;
+        const searchStart = nextRoute.indexOf('?');
+        const anchorStart = nextRoute.indexOf('#');
+        let search = "";
+        let anchor = '';
+
+        if (searchStart > 0) {
+            const searchEnd = anchorStart > 0 ? anchorStart : nextRoute.length;
+            search = nextRoute.substring(searchStart + 1, searchEnd);
+        }
+
+        if (anchorStart > 0) {
+            const anchorEnd = nextRoute.length;
+            anchor = nextRoute.substring(anchorStart + 1, anchorEnd);
+        }
+
+        const route = nextRoute.split("/");
         route.splice(0,serverSlash);
-        const path = `${location.href.split("/").slice(0,serverSlash).join("/")}${location.search? location.search + '&' : '?'}nextRoute=${route}`;
-        location.href = path;
+        localStorage.setItem("PT_nextRoute", route.join("/"));
+        const path = nextRoute.split("/").slice(0,serverSlash).join("/");
+        location.href = `${path}${search? `?${search}` : '' }${anchor? `#${anchor}` : '' }`;
     </script>
 </head>
 

packages/docs/src/app/components/main-layout/main-layout.component.ts

@@ -19,30 +19,11 @@ export class MainLayoutComponent {
     }
 
     setNextRoute() {
-        const search =  this.getParams();
-        if (!search || !search.nextRoute) { return; }
-        const nextRoute = search.nextRoute;
-        delete search.nextRoute;
-        const route = nextRoute + this.setParams(search) + location.hash;
-        this.router.navigateByUrl(route.split(',').join('/'));
-    }
-
-    getParams() {
-        const search = location.search.substring(1);
-
-        if (search) {
-            return JSON.parse(`{"${decodeURI(search).replace(/"/g, '\\"')
-                .replace(/&/g, '","')
-                .replace(/=/g, '":"')}"}`);
-        }
-    }
+        const nextRoute = localStorage.getItem('PT_nextRoute');
 
-    setParams(search) {
-        if (Object.keys(search).length) {
-            return `?${JSON.stringify(search).replace(/","/g, '&').replace(/":"/g, '=').slice(2,-2)}`;
+        if (nextRoute) {
+            this.router.navigate([nextRoute], { preserveFragment: true, queryParamsHandling: 'preserve' });
         }
-
-        return '';
     }
 
 }