Customizable, extensible, accessible and framework agnostic media player. Modern alternative to Video.js and Plyr. Supports HTML5, HLS, Dash, YouTube, Vimeo, Dailymotion...
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 {}
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
Module Import File