diff --git a/docs/src/app/shared/header-tag-manager.ts b/docs/src/app/shared/header-tag-manager.ts index 3dc54fed7a37..7dec9c53c12e 100644 --- a/docs/src/app/shared/header-tag-manager.ts +++ b/docs/src/app/shared/header-tag-manager.ts @@ -19,8 +19,8 @@ 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 @@ -28,7 +28,16 @@ export class HeaderTagManager { 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('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 index e4a8a63a93b4..853660012186 100644 --- a/docs/src/index.html +++ b/docs/src/index.html @@ -3,7 +3,6 @@ Angular Material UI Component Library -