title: Angular 2 / 4 / Universal - How to use JSON-LD data?
body: <p>I have an Angular 4 Universal application and I want to start using microdata in the format of <a href="https://developers.google.com/schemas/formats/json-ld" rel="noreferrer">JSON-LD</a>.</p>
  
  <p>It uses a <code>script</code> tag with some content, e.g.:</p>
  
  <pre><code>&lt;script type="application/ld+json"&gt;
  {
    "@context": "http://schema.org",
    ...
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Since this data should change per view, I'm looking for a way to inject this data on route change in Angular 4. Currently, <a href="https://stackoverflow.com/questions/34140065/script-tag-in-angular2-template-hook-when-template-dom-is-loaded">script tags are stripped from templates</a>. When using a workaround with <code>docuemnt.createElement</code>, this doesn't work on the server-side Angular Universal app.</p>
  
  <p>How would I do this?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I use Angular 4.x.x, which is now referred to as plain <strong>Angular</strong>.
  I inject <code>document</code> like so:</p>
  
  <pre><code>import { DOCUMENT } from '@angular/platform-browser';
  
  class Test {
    constructor(@Inject(DOCUMENT) private _document) {
    }
  
    public createScriptTag() {
      this._document.createElement('script'); // doesn't work server-side
    }
  }
  </code></pre>