ngUniversal SSR, content not showing up in source

[RedactedProfile]

Given this:

  <div class="page-content-view">
    <ngx-dynamic-hooks [content]="pageContent"></ngx-dynamic-hooks>
  </div>

pageContent is simply a variable that gets populated with a string of HTML after an Angular API call. ngUniversal definitely captures the API call in the SSR renderer, and everything else about the page can be found in the "View Source" read out, except the content that ngx-dynamic-hooks renders out. The content shows up to the viewer, just not in the view source for the purpose of scrapers and googlebot.

Actual output in View Source:

ng --version readout:

Angular CLI: 13.1.2
Node: 16.13.1
Package Manager: npm 8.3.0
OS: win32 x64

Angular: 13.1.1
... animations, cdk, common, compiler, compiler-cli, core, forms
... material, platform-browser, platform-browser-dynamic
... platform-server, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1301.2
@angular-devkit/build-angular   13.1.2
@angular-devkit/core            13.1.2
@angular-devkit/schematics      13.1.2
@angular/cli                    13.1.2
@angular/flex-layout            13.0.0-beta.36
@nguniversal/builders           13.0.1
@nguniversal/express-engine     13.0.1
@schematics/angular             13.1.2
rxjs                            6.6.7
typescript                      4.5.4

current package-lock.json

    "node_modules/ngx-dynamic-hooks": {
      "version": "1.7.2",
      "resolved": "https://registry.npmjs.org/ngx-dynamic-hooks/-/ngx-dynamic-hooks-1.7.2.tgz",
      "integrity": "sha512-O1jrdF+kS4y/B66gKynEsz8hhQbQnBobVA9tFFdU7eQeLorNKOHUnwi/2/oOQQOhYnfo4x+7pp3TF5TwJZsj3w==",
      "dependencies": {
        "tslib": "^2.0.0"
      },
      "peerDependencies": {
        "@angular/core": "6 - 13",
        "rxjs": "~6"
      }
    },

[MTobisch]

Hi there!

I can't pinpoint the exact cause of the problem from here, but it would assume it is because ngx-dynamic-hooks wasn't really developed with SSR in mind and uses with native browser DOM objects and methods, unfortuntately.

However, another kind developer seemed to encounter a similar problem and added a feature to the library not long ago that seemed to solve the issue for him. You can now implement your own PlatformService and hand it over to the DynamicHooksModule.forRoot method when loading the library (see also 8.2 Non-browser Platforms implemention)

The PlatformService is basically just an abstraction layer between the library and the underlying environment and is responsible for interacting with it. It is filled with fairly simple methods for getting/removing child nodes, reading attributes, etc. You would basically just have to write your own version that works on the server. Here is the browser implementation for PlatformService (that the library uses as default) as a reference:

import { Injectable, SecurityContext } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { PlatformService } from './platformService';

/**
 * Platform Browser Implementation of PlatformService
 */
@Injectable()
export class PlatformBrowserService implements PlatformService {
  constructor(private sanitizer: DomSanitizer) { }

  findPlaceholderElement(contentElement: Element, token: string, hookId: string): Element {
    return contentElement && contentElement.querySelector('[parsetoken="' + token + '"][hookid="' + hookId + '"]')
  }

  getAttribute(element: Element, attributeName: string): string {
    return element && element.getAttribute && element.getAttribute(attributeName);
  }

  getChildNodes(node: Element | Node): (Element | Node)[] {
    return node && Array.prototype.slice.call(node.childNodes);
  }

  getTagName(element: Element): string {
    return element && element.tagName;
  }

  removeChild(parentElement: Element | Node, childElement: Element | Node): void {
    if (parentElement && childElement) {
      parentElement.removeChild(childElement);
    }
  }

  clearChildNodes(element: Element | Node): void {
    if (element) {
      while (element.firstChild) {
        element.removeChild(element.lastChild);
      }
    }
  }

  getNgVersion(): number {
    if (document && document.querySelector('[ng-version]')) {
      return parseInt(document.querySelector('[ng-version]').getAttribute('ng-version'), 10);
    }
    return 0;
  }

  getParentNode(element: Element | Node): Element | Node {
    return element && element.parentNode;
  }

  setInnerContent(element: Element, content: string): void {
    if (element) {
      element.innerHTML = content;
    }
  }

  getInnerText(element: any): string {
    return element && element.innerText;
  }

  sanitize(content: string): string {
    return this.sanitizer.sanitize(SecurityContext.HTML, content);
  }
}

[stewones]

it def works with universal 🎉

I came across this project cause I wasn't being able to render web components (angular elements) in universal due to the lack of necessary DOM apis..

so I pivoted to common components and applied the solution provided by this project, working like a boss now.

Thank you for all your efforts @MTobisch really appreacited 🙏

---

@RedactedProfile have you tried to polyfill your ssr server with domino?

import domino from 'domino';

const win = domino.createWindow(indexHtml);

global['window'] = win as any;
global['navigator'] = win.navigator;
global['document'] = win.document;