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

Answer 1

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.