docs: insert canonical link dynamically (#31830)

thesmiler · web-flow · commit 45f7f49c00b4 · 2025-09-08T19:15:56.000+02:00
* docs: delete static canonical link

* docs: insert, not update dynamic canonical link

* docs: always append tag when inserted
diff --git a/docs/src/app/shared/header-tag-manager.ts b/docs/src/app/shared/header-tag-manager.ts
@@ -19,16 +19,25 @@ export class HeaderTagManager {
   private readonly _document = inject(DOCUMENT);
 
   /**
-   * Sets the canonical link in the header.
-   * It supposes the header link is already present in the index.html
+   * Sets the canonical link in the header. If the link already exists,
+   * it will be updated. Otherwise, a new link will be created and inserted.
    *
    * The function behave invariably and will always point to angular.dev,
    * no matter if it's a specific version build
    */
   setCanonical(absolutePath: string): void {
     const pathWithoutFragment = this._normalizePath(absolutePath).split('#')[0];
     const fullPath = `${MAT_ANGULAR_DEV}/${pathWithoutFragment}`;
-    this._document.querySelector('link[rel=canonical]')?.setAttribute('href', fullPath);
+    let canonicalLink = this._document.querySelector<HTMLLinkElement>('link[rel=canonical]');
+
+    if (canonicalLink) {
+      canonicalLink.setAttribute('href', fullPath);
+    } else {
+      canonicalLink = this._document.createElement('link');
+      canonicalLink.setAttribute('rel', 'canonical');
+      canonicalLink.setAttribute('href', fullPath);
+      this._document.head.appendChild(canonicalLink);
+    }
   }
 
   private _normalizePath(path: string): string {
diff --git a/docs/src/index.html b/docs/src/index.html
@@ -3,7 +3,6 @@
 <head>
   <meta charset="utf-8">
   <title>Angular Material UI Component Library</title>
-  <link rel="canonical" href="https://material.angular.dev">
   <base href="/">
 
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
