Created
June 24, 2016 09:21
-
-
Save kaaboeld/851bc3190eec67f6723c6054751ee2dc to your computer and use it in GitHub Desktop.
Example working service for adding meta tags to <head/> for angular2-universal. Based on http://blog.devcross.net/2016/04/17/angular-2-universal-seo-friendly-website/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {Injectable,Inject,ElementRef, Renderer} from '@angular/core'; | |
| //import { DOCUMENT } from '@angular/platform/common_dom'; | |
| import {DOCUMENT} from '@angular/platform-browser'; | |
| @Injectable() | |
| export class SeoService { | |
| private _r: Renderer; | |
| private _el: ElementRef; | |
| private _document: any; | |
| /** | |
| * Angular 2 Title Service | |
| */ | |
| //private titleService: Title; | |
| /** | |
| * <head> Element of the HTML document | |
| */ | |
| private headElement: any;//HTMLElement; | |
| /** | |
| <meta property="og:title" content="Title Here" /> | |
| */ | |
| private ogTitle: HTMLElement; | |
| /** | |
| <meta property="og:type" content="article" /> | |
| */ | |
| private ogType: HTMLElement; | |
| /** | |
| <meta property="og:url" content="http://www.example.com/" /> | |
| */ | |
| private ogUrl: HTMLElement; | |
| /** | |
| <meta property="og:image" content="http://example.com/image.jpg" /> | |
| */ | |
| private ogImage: HTMLElement; | |
| /** | |
| <meta property="og:description" content="Description Here" /> | |
| */ | |
| private ogDescription: HTMLElement; | |
| /** | |
| * Inject the Angular 2 Title Service | |
| * @param titleService | |
| */ | |
| constructor(@Inject(DOCUMENT) private document, element: ElementRef, renderer: Renderer) { | |
| this._el = element; | |
| this._r = renderer; | |
| //super(); | |
| this._document = document; | |
| this.headElement = this._document.head; | |
| this.ogTitle = this.getOrCreateMetaElement('og:title','property'); | |
| this.ogType = this.getOrCreateMetaElement('og:type','property'); | |
| this.ogUrl = this.getOrCreateMetaElement('og:url','property'); | |
| this.ogImage = this.getOrCreateMetaElement('og:image','property'); | |
| this.ogDescription = this.getOrCreateMetaElement('og:description','property'); | |
| } | |
| public setTitle(siteTitle = '',pageTitle ='',separator = ' / '){ | |
| let title = siteTitle; | |
| if(pageTitle != '') title += separator + pageTitle; | |
| this._document.title = title; | |
| } | |
| /* | |
| * Open graph | |
| */ | |
| public setOgTitle(value: string) { | |
| this._r.setElementAttribute(this.ogTitle,'content',value); | |
| } | |
| public setOgType(value: string) { | |
| this._r.setElementAttribute(this.ogType,'content',value); | |
| } | |
| public setOgUrl(value: string) { | |
| this._r.setElementAttribute(this.ogUrl,'content',value); | |
| } | |
| public setOgImage(value: string) { | |
| this._r.setElementAttribute(this.ogImage,'content',value); | |
| } | |
| public setOgDescription(value: string) { | |
| this._r.setElementAttribute(this.ogDescription,'content',value); | |
| } | |
| /** | |
| * get the HTML Element when it is in the markup, or create it. | |
| * @param name | |
| * @returns {HTMLElement} | |
| */ | |
| private getOrCreateMetaElement(name: string,attr: string): HTMLElement { | |
| let el: HTMLElement; | |
| var prop = ((attr != null)? attr : 'name'); | |
| el = this._r.createElement(this.headElement,'meta',null); | |
| this._r.setElementAttribute(el,prop,name); | |
| return el; | |
| } | |
| } |
Is'nt setDescription required as well?
I get this error as well I've added this service in my app.module providers list
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@threesquared @DBuit @vishal41190 ElementRef is not relevant in scope of an Angular service. It would work only in a component.
You can just remove it from the constructor, as it's not even used at all.