docs(docs-infra): introduce a custom UrlSerializer

The custom serializer should handle Adev-specific behavior like decoding encoded forward slash similarly to the app host.

Author: hawkgs

adev/src/app/app.config.ts

@@ -13,6 +13,7 @@ import {
   inject,
   provideEnvironmentInitializer,
 } from '@angular/core';
+import {UrlSerializer} from '@angular/router';
 import {
   DOCS_CONTENT_LOADER,
   ENVIRONMENT,
@@ -31,6 +32,7 @@ import {CustomErrorHandler} from './core/services/errors-handling/error-handler'
 import {ExampleContentLoader} from './core/services/example-content-loader.service';
 import {routerProviders} from './routing/router_providers';
 import {TYPESCRIPT_VFS_WORKER_PROVIDER} from './editor/code-editor/workers/factory-provider';
+import {AdevUrlSerializer} from './core/services/routing/adev-url-serializer';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -49,5 +51,9 @@ export const appConfig: ApplicationConfig = {
       deps: [DOCUMENT],
     },
     TYPESCRIPT_VFS_WORKER_PROVIDER,
+    {
+      provide: UrlSerializer,
+      useClass: AdevUrlSerializer,
+    },
   ],
 };

adev/src/app/core/services/routing/adev-url-serializer.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {DefaultUrlSerializer, UrlTree} from '@angular/router';
+
+/**
+ * Custom URL serializer extending the default behavior
+ * with Adev-specific behavior.
+ */
+export class AdevUrlSerializer extends DefaultUrlSerializer {
+  override parse(url: string): UrlTree {
+    // Since the app host/server is decoding encoded forward slashes,
+    // we perform this on the client as well in order to maintain
+    // a consistent behavior between the two environments and
+    // avoid opening a different page on client hydration (presumably, 404).
+    url = url.replaceAll(/%2(F|f)/g, '/');
+
+    return super.parse(url);
+  }
+}

adev/src/app/core/services/routing/adev-url.serializer.spec.ts

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {TestBed} from '@angular/core/testing';
+import {UrlSerializer} from '@angular/router';
+import {AdevUrlSerializer} from './adev-url-serializer';
+
+describe('AdevUrlSerializer', () => {
+  let serializer: UrlSerializer;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        {
+          provide: UrlSerializer,
+          useClass: AdevUrlSerializer,
+        },
+      ],
+    });
+
+    serializer = TestBed.inject(UrlSerializer);
+  });
+
+  it('should decode encoded forward slash (%2F)', () => {
+    // Uppercase hex
+    expect(serializer.parse('page%2Fabout').toString()).toBe('/page/about');
+
+    // Lowercase hex
+    expect(serializer.parse('page%2fabout').toString()).toBe('/page/about');
+  });
+});