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

Question

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
  }
}

Universal is not compatible with Angular 4, so it's not clear what exactly you mean. It's very different for Angular 2 and Angular 4. How do you use `document`? It should be injected like `@Inject(DOCUMENT) document`, because there's no `document` global on server side. The quality of the answer depends on the quality of the question. See http://stackoverflow.com/help/mcve — Estus Flask, Apr 20 '17 at 15:06
@SamVloeberghs There should be clear difference what 'Universal' is referred to. https://github.com/angular/universal isn't compatible with A4. Even though the documentation *currently* describes it as 'Univeral' https://angular.io/docs/ts/latest/guide/universal.html , it's just `platform-server` in fact. — Estus Flask, May 03 '17 at 21:12
@estus, still wrong.. https://github.com/angular/universal/tree/master/modules/ng-express-engine is what you would use to have the angular engine in your express application. I use this in production and works with v4.. :) — Sam Vloeberghs, May 03 '17 at 21:14

Sam Vloeberghs · Answer 1 · 2017-07-14T16:29:15.127

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.

`ɵ` stuff is internal. I believe they added a symbol that is not on keyboard layout especially to designate that it shouldn't be accidentally used from the outside. `getDOM()` has always been internal. I'm interested in seeing the answer for this question as well, but I don't see reasons why this shouldn't work with `DOCUMENT`. This provider exists exactly to provide platform-independent `document`, and I believe [it does that for `platform-server`](https://github.com/angular/angular/blob/4.0.0/packages/platform-server/src/server.ts#L80). — Estus Flask, May 03 '17 at 21:22

score 0 · Answer 2 · answered Aug 17 '23 at 02:56

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);
  }
}

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

2 Answers2