"document is not defined" when running on Angular Universal

[treble-maker123]

ERROR ReferenceError: document is not defined at Ng2AutoCompleteDirective.ngOnInit (xxxx) at checkAndUpdateDirectiveInline (xxxx) at checkAndUpdateNodeInline (xxxx) at checkAndUpdateNode (xxxx) at prodCheckAndUpdateNode (xxxx) at Object.r.ɵvid.e [as updateDirectives] (xxxx) at Object.updateDirectives (xxxx) at checkAndUpdateView (xxxx)

The compiled JS code looks like this,

Ng2AutoCompleteDirective.prototype.ngOnInit = function () {
        // wrap this element with <div class="ng2-auto-complete">
        This line ==> this.wrapperEl = document.createElement("div");
        this.wrapperEl.className = "ng2-auto-complete-wrapper";
        this.wrapperEl.style.position = "relative";
        this.el.parentElement.insertBefore(this.wrapperEl, this.el.nextSibling);
......

This isn't breaking anything, just throwing errors on the server side.

[keshari05]

I have same issue how you solve this?

[treble-maker123]

It's been a long time, and I can't find what I did. But one idea is that you can probably wrap the component using ngAutoComplete in a server-check, e.g. if running on the component, don't render the component. This might not work for all scenarios though.

[sengirab]

I will look at this tomorrow. I think that its possible to refactor the component not to use document.

Are you at the latest version?