Is MutationObserverDirective causing an issue with SSR?

[Teebo]

I am serving the app in SSR, I get an error: ReferenceError: MutationObserver is not defined

I see MutationObserverDirective is the one using the MutationObserver.

I am having a challenge mocking MutationObserver in the server.ts file using domino.
Are there any other ideas or ways to circumvent this issue? Or maybe there's something I am missing?
It seems to be coming from '@ng-web-apis/mutation-observer'

[waterplea]

It can be mocked with just s dummy implementing the interface, but it's best to just use @ng-web-apis/universal:
https://github.com/ng-web-apis/universal
Check out readme and don't forget a ⭐😉

[Breate]

not working.

[Teebo]

@waterplea Ahh almost...

I followed the instructions:

1. Import in the server.ts : import '@ng-web-apis/universal/mocks';
2. Import in app.server.module.ts: UniversalModule

It builds successfully when using dev:ssr script but when I access the app in the browser I get an error:

NullInjectorError: R3InjectorError(AppServerModule)[InjectionToken Mobile browser detection -> InjectionToken An abstraction over window.navigator.userAgent object -> InjectionToken User Agent string passed from server side -> InjectionToken User Agent string passed from server side -> InjectionToken User Agent string passed from server side]: 
  NullInjectorError: No provider for InjectionToken User Agent string passed from server side!

Did I miss something?

UPDATE:

The prerender script fails when building after adding those providers in the server.ts file

[Teebo]

With the scripts: npm run build:ssr && npm run serve:ssr SSR works.
But with npm run prerender the below error is thrown.

ERROR Error [NullInjectorError]: R3InjectorError(AppServerModule)[InjectionToken Mobile browser detection -> InjectionToken An abstraction over window.navigator.userAgent object -> InjectionToken User Agent string passed from server side -> InjectionToken User Agent string passed from server side -> InjectionToken User Agent string passed from server side]:
  NullInjectorError: No provider for InjectionToken User Agent string passed from server side!

[waterplea]

Yes, it doesn't work with prerender because there is no request so there's nowhere to get that data from. And we cannot provide a default value because of this issue:
angular/universal#1646
So if you want to use prerender you would need to manually provide something like an empty string for these two tokens:
https://github.com/ng-web-apis/universal/blob/master/projects/universal/src/tokens/ssr-location.ts
https://github.com/ng-web-apis/universal/blob/master/projects/universal/src/tokens/ssr-user-agent.ts

[Teebo]

I am still perplexed by DI.
Does that mean I can do like?

  server.engine(
    'html',
    ngExpressEngine({
      bootstrap: AppServerModule,
      providers: [
        {
          provide: UNIVERSAL_USER_AGENT,
          useValue: 'User Agent string passed from server side',
        },
        {
          provide: UNIVERSAL_LOCATION,
          useValue: 'Location object passed from server side',
        },
      ],
    })
  );

[Teebo]

@waterplea this does not work, am I doing it wrong?

[Teebo]

I ended up using Scully to pre-render the application