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