这个问题由于 Angular 14 Universal 编译器使用了 EventTarget 对象,但是它在服务器端的 JavaScript 环境中不可用,因此导致了 ReferenceError。
要解决这个问题,可以在服务器端引入 polyfills 来提供缺失的事件对象。具体实现步骤如下:
npm install --save-dev @angular-builders/custom-webpack
npm install --save-prod xhr2 bufferutil utf-8-validate
import 'reflect-metadata';
import 'zone.js/dist/zone-node';
import * as domino from 'domino';
import { TextEncoder, TextDecoder } from 'util';
(global as any).window = domino.createWindow('').defaultView;
(global as any).document = (global as any).window.document;
(global as any).navigator = (global as any).window.navigator;
(global as any).Event = global.window.Event;
(global as any).EventTarget = (global as any).window.EventTarget;
if(!global.window){
(global as any).window = {} as Window;
}
Object.defineProperty(global, 'CSS', {value:null});
Object.defineProperty(global, 'getComputedStyle', {value: () => {
return {
getPropertyValue: () => {
return '';
}
};
}});
Object.defineProperty(global.document.body.style, 'transform', {
value: () =>{
return {
enumerable: true,
configurable: true
};
},
});
(global as any).XMLHttpRequest = require('xhr2');
(global as any).WebSocket = require('ws');
(global as any).TextEncoder = TextEncoder;
(global as any).TextDecoder = TextDecoder;
(global as any).HTMLElement = (global as any).window.HTMLElement;
(global as any).MessageEvent = (global as any).window.MessageEvent;
(global as any).KeyboardEvent = (global as any).window.KeyboardEvent;
(global as any).Event = (global as any).window.Event;
const webpack = require('webpack');
module.exports = {
entry: './server.ts',
target: 'node',
resolve: { extensions: ['.ts', '.js'] },
output: {
path: __dirname + '/dist',
filename: 'server.js'
},
module: {
rules: [
{ test: /\.ts$/, loader: 'ts-loader' }
]
},
plugins: [
new webpack.ContextReplacementPlugin(
/(.+)?angular(\\|\/)core(.+)?/,