angularangular5meta-tagscanonical-link

how to add canonical link in angular 5


How to add canonical link in angular 5 dynamically

<link rel="canonical" href="http://foobar.com/gotcah"/>

Solution

  • I got the solution, create link service(ex: link.service.ts) & paste the below code :

    import { Injectable, Optional, RendererFactory2, ViewEncapsulation, Inject } from '@angular/core';
    import { DOCUMENT } from '@angular/platform-browser';
    
    @Injectable()
    export class LinkService {
    
    constructor(
        private rendererFactory: RendererFactory2,
        @Inject(DOCUMENT) private document
    ) {
    }
    
    /**
     * Inject the State into the bottom of the <head>
     */
    addTag(tag: LinkDefinition, forceCreation?: boolean) {
    
        try {
            const renderer = this.rendererFactory.createRenderer(this.document, {
                id: '-1',
                encapsulation: ViewEncapsulation.None,
                styles: [],
                data: {}
            });
    
            const link = renderer.createElement('link');
            const head = this.document.head;
            const selector = this._parseSelector(tag);
    
            if (head === null) {
                throw new Error('<head> not found within DOCUMENT.');
            }
    
            Object.keys(tag).forEach((prop: string) => {
                return renderer.setAttribute(link, prop, tag[prop]);
            });
    
            // [TODO]: get them to update the existing one (if it exists) ?
            renderer.appendChild(head, link);
    
        } catch (e) {
            console.error('Error within linkService : ', e);
        }
    }
    
    private _parseSelector(tag: LinkDefinition): string {
        // Possibly re-work this
        const attr: string = tag.rel ? 'rel' : 'hreflang';
        return `${attr}="${tag[attr]}"`;
    }
    }
    
     export declare type LinkDefinition = {
      charset?: string;
      crossorigin?: string;
      href?: string;
      hreflang?: string;
      media?: string;
      rel?: string;
      rev?: string;
      sizes?: string;
      target?: string;
      type?: string;
    } & {
        [prop: string]: string;
    };
    

    import service in component :

    import { LinkService } from '../link.service';
    
    constructor(private linkService: LinkService) {
    
    this.linkService.addTag( { rel: 'canonical', href: 'url here'} );
    }
    

    please refer below link :

    https://github.com/angular/angular/issues/15776