angular - 在服务器端禁用事件、UIEvent、HTMLEvent

Question

我最近在 Angular 9 之后更新了 Angular，其中 Angular Universal 发生了变化，并且我破坏了我的服务器端渲染。修复了一些问题后，我遇到了以下错误：

__metadata("design:type", UIElement)
ReferenceError: UIElement is not defined

据我了解，问题在于 UIElement 是一个浏览器元素，在更新后会破坏服务器端。

为了解决这个问题，我尝试过：

-编辑 polyfills.ts 文件以将 UIElement 视为仅限浏览器的对象 ( https://github.com/angular/universal/issues/1239 )

- 使用 Domino 将 UIElement 视为浏览器，如我的 server.ts 文件中所示：

服务器.ts：

// generated by @ng-toolkit/serverless
import 'zone.js/node';
import 'reflect-metadata';
import {enableProdMode, ValueProvider} from '@angular/core';
import {ngExpressEngine} from '@nguniversal/express-engine';

import * as express from 'express';
import * as bodyParser from 'body-parser';
import * as cors from 'cors';
import * as compression from 'compression';

 import {join} from 'path';

enableProdMode();

export const app = express();

const DIST_FOLDER = join(process.cwd(), 'dist');

app.use(compression());
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));

const AppServer = process.env.APP === 'admin' ? 'app-admin-server' : 'app-server';
const AppBrowser = process.env.APP === 'admin' ? 'app-admin-browser' : 'app-browser';

const fs = require("fs");
const path = require("path");
const template = join(AppBrowser, 'index.html');
const domino = require("domino");
const templateA = fs
  .readFileSync(path.join("dist/browser", "index.html"))
  .toString();
const win = domino.createWindow(templateA);

global["window"] = win;
global["document"] = win.document;
global["branch"] = null;
global["object"] = win.object;
global['UIEvent'] = win.UIEvent;
global['HTMLElement'] = win.HTMLElement;
global['navigator'] = win.navigator;
global['localStorage'] = localStorage;



const {ServerAppModuleNgFactory, LAZY_MODULE_MAP} =. 
require('./dist/'+AppServer+'/main');
// const server = require('./dist/app-server/main');
// console.log(server);
import {ServerAppModule} from './src/app-admin/app/server.app.module';
app.engine('html', (_, options, callback) => {
  console.log(AppServer);
  console.log(ServerAppModule);
  const engine = ngExpressEngine({
    bootstrap: ServerAppModule,
   });
  engine(_, options, callback);
});
app.set('view engine', 'html');

app.set('views', join(DIST_FOLDER, AppBrowser));

app.get('*.*', express.static(join(DIST_FOLDER, AppaBrowser)));

app.get('*', (req, res) => {
  res.render(join(DIST_FOLDER, AppBrowser, 'index.html'), {req, res});
});


// app.get('/api.*', (req, res) => {
//   res.status(404).send('data requests are not supported');
// });

关于解决此问题的任何想法？

标签： angularserver-side-renderingangular-universal