Angular 13 Universal -- ReferenceError: HTMLElement is not defined

[rnicholls]

Hello,

I am having an issue trying to get past this stumbling block for Angular SSR. I keep getting a ReferenceError: HTMLElement is not defined. If I remember the import of the Vime module everything works fine. Normally this wouldn't be even wiring up HTMLElement to global via Domino doesn't seem to be working.

Any help would be greatly appreciated.

server.ts

import 'zone.js/dist/zone-node';

import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import path, { join } from 'path';
import * as isBot from 'isbot';

import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync, readFileSync } from 'fs';

const domino = require('domino');

const template = readFileSync(path.join('dist/browser', 'index.html')).toString();

const window = domino.createWindow(template);

(global as any).window = window;
(global as any).document = window.document;
(global as any).Event = window.Event;
(global as any).KeyboardEvent = window.KeyboardEvent;
(global as any).MouseEvent = window.MouseEvent;
(global as any).FocusEvent = window.FocusEvent;
(global as any).PointerEvent = window.PointerEvent;
(global as any).HTMLElement = window.HTMLElement;
(global as any).HTMLElement.prototype.getBoundingClientRect = () => {
  return {
    left: '',
    right: '',
    top: '',
    bottom: ''
  };
};

(global as any).object = window.object;
(global as any).navigator = window.navigator;
(global as any).localStorage = window.localStorage;
(global as any).DOMTokenList = window.DOMTokenList;

export function app(): express.Express {
  const server = express();
  const distFolder = join(process.cwd(), 'dist/browser');
  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';

server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
  }));

  server.set('view engine', 'html');
  server.set('views', distFolder);

  server.get('*.*', express.static(distFolder, {
    maxAge: '1y'
  }));

  server.get('*', (req, res) => {
    if (isBot(req.get('user-agent'))) {
      res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
    } else {
      res.sendFile(join(distFolder, `index.html`));
    }
  });

  server.use('/account/**', express.static(distFolder));

  return server;
}

function run() {
  const port = process.env.PORT || 4000;

  const server = app();
  server.listen(port, () => {
    console.log(`Node Express server listening on http://localhost:${port}`);
  });
}

declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
  run();
}

export * from './src/main.server';

Module Import File

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { SharedModule } from '@app/shared/shared.module';
import { HomeComponent } from './pages/home/home.component';
import { EllipsisModule } from "ngx-ellipsis";
import { HomeRoutingModule } from '@home/home-routing.module';
import { TrailersComponent } from './pages/trailers/trailers.component';
import { VideoComponent } from './pages/video/video.component';
import { ArticleComponent } from './pages/articles/articles.component';
import { VimeModule } from '@vime/angular';

@NgModule({
  declarations: [HomeComponent, TrailersComponent, VideoComponent, ArticleComponent],
  imports: [
    SharedModule,
    CommonModule,
    EllipsisModule,
    HomeRoutingModule,
    VimeModule
  ],
  exports: []
})

export class HomeModule {}

[phpb-com]

Same problem happens with Remix-run and React 18 (SSR).