feat(trailing-slash): add trailing slash url serializer

projects/design/src/lib/table-of-contents/table-of-contents.component.ts

@@ -77,7 +77,7 @@ export class TableOfContentsComponent implements OnInit, OnDestroy {
         switchMap((el) =>
           this.content.getCurrent().pipe(map((c) => [el.id, c.route]))
         ),
-        tap(([el, route]) => this.location.replaceState(`${route}#${el}`)),
+        tap(([el, route]) => this.location.replaceState(`${route}/#${el}`)),
         takeUntil(this.onDestroy$)
       )
       .subscribe();
@@ -107,7 +107,7 @@ export class TableOfContentsComponent implements OnInit, OnDestroy {
   }
 
   scrollTo(url: string, id: string) {
-    this.location.replaceState(`${url}#${id}`);
+    this.location.replaceState(`${url}/#${id}`);
     this.document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
   }
 

src/app/app.module.ts

@@ -21,6 +21,8 @@ import {
 import { NewsletterSignupModule } from '@components/newsletter-signup/newsletter-signup.module';
 import { NizSearchComponentModule } from '@components/search/search.module';
 import { PipesModule } from '@pipes/pipes.module';
+import { UrlSerializer } from '@angular/router';
+import { TrailingSlashUrlSerializer } from './utils/trailing-slash-url-serializer';
 
 @NgModule({
   declarations: [AppComponent],
@@ -35,17 +37,17 @@ import { PipesModule } from '@pipes/pipes.module';
     MarkdownModule.forRoot({ loader: HttpClient }),
     NizTabsModule,
     NizTabModule,
-    NizFooterModule, 
+    NizFooterModule,
     NizNavbarModule,
     NizToolbarModule,
     NizInlineSvgModule,
     NewsletterSignupModule,
     NizSearchComponentModule,
     PipesModule,
     NizToastModule,
-    NizMenuModule
+    NizMenuModule,
   ],
-  providers: [],
+  providers: [{ provide: UrlSerializer, useClass: TrailingSlashUrlSerializer }],
   bootstrap: [AppComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })

src/app/utils/trailing-slash-url-serializer.ts

@@ -0,0 +1,23 @@
+import { DefaultUrlSerializer, UrlTree } from '@angular/router';
+
+/**
+ * @see https://github.com/angular/angular/issues/16051
+ */
+export class TrailingSlashUrlSerializer extends DefaultUrlSerializer {
+  private static _withTrailingSlash(url: string): string {
+    const splitOn = url.indexOf('?') > -1 ? '?' : '#';
+    const pathArr = url.split(splitOn);
+
+    if (!pathArr[0].endsWith('/')) {
+      const fileName: string = url.substring(url.lastIndexOf('/') + 1);
+      if (fileName.indexOf('.') === -1) {
+        pathArr[0] += '/';
+      }
+    }
+    return pathArr.join(splitOn);
+  }
+
+  serialize(tree: UrlTree): string {
+    return TrailingSlashUrlSerializer._withTrailingSlash(super.serialize(tree));
+  }
+}