CODEWITHSUNDEEP
javascriptangulartypescriptangular-universal
Nicky
Nicky

Reputation: 3817

Angular 2 / 4 / Universal - How to use JSON-LD data?

I have an Angular 4 Universal application and I want to start using microdata in the format of JSON-LD.

It uses a script tag with some content, e.g.:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  ...
}
</script>

Since this data should change per view, I'm looking for a way to inject this data on route change in Angular 4. Currently, script tags are stripped from templates. When using a workaround with docuemnt.createElement, this doesn't work on the server-side Angular Universal app.

How would I do this?

EDIT

I use Angular 4.x.x, which is now referred to as plain Angular. I inject document like so:

import { DOCUMENT } from '@angular/platform-browser';

class Test {
  constructor(@Inject(DOCUMENT) private _document) {
  }

  public createScriptTag() {
    this._document.createElement('script'); // doesn't work server-side
  }
}

Upvotes: 5

Views: 1803

Answers (2)

Chaster johnson
Chaster johnson

Reputation: 173

Late to this one but here is how we did it:

import { AfterViewInit, Component, Inject, Input, OnInit, Renderer2 } from '@angular/core';

import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-post-article',
  templateUrl: './article-post.component.html',
  styleUrls: ['./article-post.component.css', './post-article-post.scss']
})
export class PostArticleComponent implements OnInit, AfterViewInit {
  
  @Input() feed = new FeedModel();

  constructor(private router: Router,
              private sanitizer: DomSanitizer,
              private renderer2: Renderer2,
              @Inject(DOCUMENT) private _document: Document) { } 

  createJsonLd() {
    let userId = this.feed.generatedByUserId.toString();
    let script = this.renderer2.createElement('script');
    script.type = `application/ld+json`;
    script.text = `
        {
            "@context": "https://schema.org",
            "@type": "NewsArticle",
            "headline": "` + this.feed.feedData.ArticleTitle + `",
            "image": [
              "` + this.feed.feedData.ImageUrl + `"
             ],
            "datePublished": "` + this.feed.createdUtcTimestamp + `",
            "dateModified": "` + this.feed.createdUtcTimestamp + `",
              }]
        }
    `;

    this.renderer2.appendChild(this._document.body, script);
  }

  ngAfterViewInit() {
      setTimeout( () =>
        this.createJsonLd()
      , 100);
  }
}

Upvotes: 0

Sam Vloeberghs
Sam Vloeberghs

Reputation: 912

EDIT: as pointed out in the comments, this solutions is a hacky solution and to be used with caution.

You can inject some other type and function "ɵgetDOM" and "ɵDomAdapter" to get a reference to the dom. Sorry for calling it "some" service and function, cause I don't have a clue why they name it like this. I just looked into source code and how the angular team is doing it with the MetaService. 

import { Inject } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';
import { ɵgetDOM, ɵDomAdapter, DOCUMENT } from '@angular/platform-browser';

@Injectable()
export class SeoService {

  private dom: ɵDomAdapter;

  constructor(@Inject(DOCUMENT) private document: any,
              private titleService: Title,
              private metaService: Meta) {

    this.dom = ɵgetDOM();

    let scriptEl = this.dom.createElement('script');
    // ..

  }
}

I've tested this and use it in production.

Upvotes: 1

Related Questions