javascript - Angular Universal ReferenceError - KeyboardEvent 未定义

标签 javascript angular webpack angular-universal universal

我在 server.ts 中添加了“domino”,甚至将 webpack.server.config.js 更新为:

module: {
    rules: [
              { test: /\.(ts|js)$/, loader: 'regexp-replace-loader', options: { match: { pattern: '\\[(Mouse|Keyboard)Event\\]', flags: 'g' }, replaceWith: '[]', } },
              { test: /\.ts$/, loader: 'ts-loader' }, 
           ]
}

但仍然出现相同的错误:“ReferenceError - KeyboardEvent 未定义”。

我正在终端中运行这些命令

$npm run build:ssr

$npm run serve:ssr

命令在 package.json 中定义为:

"build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
"serve:ssr": "node dist/server.js",
"build:client-and-server-bundles": "ng build --prod && ng run angular.io-example:server",
"webpack:server": "webpack --config webpack.server.config.js --progress --colors"

有没有人知道如何摆脱这个错误?

最佳答案

给你

const domino = require('domino');
const fs = require('fs');
const template = fs.readFileSync(join(DIST_FOLDER , 'index.html')).toString();
const win = domino.createWindow(template);
global['window'] = win;
global['Node'] = win.Node;
global['navigator'] = win.navigator;
global['Event'] = win.Event;
global['KeyboardEvent'] = win.Event;
global['MouseEvent'] = win.Event;
global['Event']['prototype'] = win.Event.prototype;
global['document'] = win.document;

把上面的代码放到你的 server.ts 文件的前面

const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/server/main');

关于javascript - Angular Universal ReferenceError - KeyboardEvent 未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55650575/

相关文章:

angular - ngx-charts 结果/数据数组更新问题

forms - 表单提供者 ngForm

javascript - Webpack脚本执行顺序

reactjs - 使用 Webpack 编译的应用程序的插件系统

webpack - 部署 SPA 时如何确保前端的无缝可用性?

javascript - D3.js 从数组的数组中选择最小/最大值(嵌套 d3.extent)

javascript - 我可以为Javascript的replace()传递多个参数(模式)吗?如果没有,有什么好的替代方案吗?

Javascript 教程,在映射和减少以获得正确答案时遇到问题

angular - Babel 是否被用作 Angular 5 中的编译器(AOT 或 JIT)

javascript - 如何使用集合作为谓词来过滤数组