Angular SSR - ReferenceError: Element is not defined
Angular SSR - ReferenceError: Element is not defined
我正在开发一个 angular 7 项目。我使用服务器端渲染来让 facebooks 爬虫正常工作。到目前为止，我已经开发了一些组件，还没有遇到任何问题。但是现在我遇到了问题，因为我正在使用 fullcalendar 处理组件...
使用 ng s 服务应用程序没有问题。但是，当我尝试使用服务器端呈现 npm run build:ssr && npm run serve:ssr 构建应用程序时，我现在收到以下错误：npm ERR! code ELIFECYCLE
直到现在我做了 npm install 和 npm audit fix 但这没有帮助。
我想问题出在我的配置错误
app.module.ts 或 app.server.module.ts 但我想不出来。
错误信息内容如下：
C:myApp\dist\server.js:151900
var matchesMethod = Element.prototype.matches ||
^
ReferenceError: Element is not defined
at C:myApp\dist\server.js:151900:25
at C:myApp\dist\server.js:151801:13
at Object.<anonymous> (C:myApp\dist\server.js:151803:2)
at __webpack_require__ (C:myApp\dist\server.js:20:30)
at Module.<anonymous> (C:myApp\dist\server.js:151309:76)
at __webpack_require__ (C:myApp\dist\server.js:20:30)
at Object.@fullcalendar/angular (C:myApp\dist\server.js:134654:18)
at __webpack_require__ (C:myApp\dist\server.js:131212:30)
at Module../node_modules/@fullcalendar/angular/fullcalendar-angular.ngfactory.js (C:myApp\dist\server.js:131336:79)
at __webpack_require__ (C:myApp\dist\server.js:131212:30)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! silver-home@0.0.0 serve:ssr: `node dist/server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the silver-home@0.0.0 serve:ssr script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\myUser\AppData\Roaming\npm-cache\_logs19-04-28T20_11_07_675Z-debug.log
npm 的内容debug.log：
0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'serve:ssr' ]
2 info using npm@6.4.1
3 info using node@v10.15.3
4 verbose run-script [ 'preserve:ssr', 'serve:ssr', 'postserve:ssr' ]
5 info lifecycle myApp@0.0.0~preserve:ssr: myApp@0.0.0
6 info lifecycle myApp@0.0.0~serve:ssr: myApp@0.0.0
7 verbose lifecycle myApp@0.0.0~serve:ssr: unsafe-perm in lifecycle true
8 verbose lifecycle myApp@0.0.0~serve:ssr: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\myApp\node_modules\.bin;C:\ProgramData\Oracle\Java\javapath;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\QuickTime\QTSystem\;C:\xampp\php;C:\ProgramData\ComposerSetup\bin;C:\WINDOWS\System32\OpenSSH\;C:\Program Files\Git\cmd;C:\Program Files (x86)\Bitvise SSH Client;C:\Program Files (x86)\AOMEI Backupper;C:\Program Files\nodejs\;C:\Program Files (x86)\GNU Tools Arm Embedded 2018-q2-update\bin;C:\Users\myUser\AppData\Local\Microsoft\WindowsApps;C:\Users\myUser\AppData\Roaming\Composer\vendor\bin;C:\Program Files (x86)\GnuWin32\bin;C:\mingw\bin;C:\Users\Uchendu\AppData\Roaming\npm;C:\Users\myUser\Desktop\Etudes\Math spec\programmation\bin;C:\Program Files\Java\jdk1.8.0_144\bin;
9 verbose lifecycle myApp@0.0.0~serve:ssr: CWD: C:myApp
10 silly lifecycle myApp@0.0.0~serve:ssr: Args: [ '/d /s /c', 'node dist/server' ]
11 silly lifecycle myApp@0.0.0~serve:ssr: Returned: code: 1 signal: null
12 info lifecycle myApp@0.0.0~serve:ssr: Failed to exec serve:ssr script
13 verbose stack Error: myApp@0.0.0 serve:ssr: `node dist/server`
13 verbose stack Exit status 1
13 verbose stack at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:301:16)
13 verbose stack at EventEmitter.emit (events.js:189:13)
13 verbose stack at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:189:13)
13 verbose stack at maybeClose (internal/child_process.js:970:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid myApp@0.0.0
15 verbose cwd C:\myApp
16 verbose Windows_NT 10.0.17134
17 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "serve:ssr"
18 verbose node v10.15.3
19 verbose npm v6.4.1
20 error code ELIFECYCLE
21 error errno 1
22 error myApp@0.0.0 serve:ssr: `node dist/server`
22 error Exit status 1
23 error Failed at the myApp@0.0.0 serve:ssr script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]
有什么解决问题的建议吗？
问题来自第三方库。
https://github.com/fullcalendar/fullcalendar-angular
ReferenceError: Element is not defined
at C:myApp\dist\server.js:151900:25
at C:myApp\dist\server.js:151801:13
at Object.<anonymous> (C:myApp\dist\server.js:151803:2)
at __webpack_require__ (C:myApp\dist\server.js:20:30)
at Module.<anonymous> (C:myApp\dist\server.js:151309:76)
at __webpack_require__ (C:myApp\dist\server.js:20:30)
at Object.@fullcalendar/angular (C:myApp\dist\server.js:134654:18)
at __webpack_require__ (C:myApp\dist\server.js:131212:30)
at Module../node_modules/@fullcalendar/angular/fullcalendar-angular.ngfactory.js (C:myApp\dist\server.js:131336:79)
at __webpack_require__ (C:myApp\dist\server.js:131212:30)
似乎未能导入 日历组件的组件工厂，这让我认为您缺少一些节点依赖项。
确认您已安装 @fullcalendar/core @fullcalendar/daygrid 软件包。
此库正在使用另一个 JavaScript 库（"core" 包），它不是为服务器端呈现而设计的。虽然您可以编译该项目。如果 "core" 库中有任何不能在 NodeJS 上 运行 的东西，那么它可能会编译失败或者 运行.
在您的 server.ts 文件中添加此行：
global['Event'] = null;
global['KeyboardEvent'] = null;
ReferenceError: window is not defined
at Object.<anonymous> (D:\bid\mii\pdfconvetor\dist\server\main.js:11220:30237)
at 5RHE.module.exports (D:\bid\mii\pdfconvetor\dist\server\main.js:11181:37)
at Object.5RHE (D:\bid\mii\pdfconvetor\dist\server\main.js:11183:112)
at __webpack_require__ (D:\bid\mii\pdfconvetor\dist\server\main.js:20:30)
at Module.K011 (D:\bid\mii\pdfconvetor\dist\server\main.js:61812:17)
at __webpack_require__ (D:\bid\mii\pdfconvetor\dist\server\main.js:20:30)
at Object.0 (D:\bid\mii\pdfconvetor\dist\server\main.js:992:18)
at __webpack_require__ (D:\bid\mii\pdfconvetor\dist\server\main.js:20:30)
at D:\bid\mii\pdfconvetor\dist\server\main.js:84:18
at Object.<anonymous> (D:\bid\mii\pdfconvetor\dist\server\main.js:87:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! pdfconvetor@0.0.0 serve:ssr: `node dist/server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the pdfconvetor@0.0.0 serve:ssr script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\mittal\AppData\Roaming\npm-cache\_logs19-08-02T10_47_18_582Z-debug.log
我正在开发一个 angular 7 项目。我使用服务器端渲染来让 facebooks 爬虫正常工作。到目前为止，我已经开发了一些组件，还没有遇到任何问题。但是现在我遇到了问题，因为我正在使用 fullcalendar 处理组件...
使用 ng s 服务应用程序没有问题。但是，当我尝试使用服务器端呈现 npm run build:ssr && npm run serve:ssr 构建应用程序时，我现在收到以下错误：npm ERR! code ELIFECYCLE
直到现在我做了 npm install 和 npm audit fix 但这没有帮助。
我想问题出在我的配置错误
app.module.ts 或 app.server.module.ts 但我想不出来。
错误信息内容如下：
C:myApp\dist\server.js:151900
var matchesMethod = Element.prototype.matches ||
^
ReferenceError: Element is not defined
at C:myApp\dist\server.js:151900:25
at C:myApp\dist\server.js:151801:13
at Object.<anonymous> (C:myApp\dist\server.js:151803:2)
at __webpack_require__ (C:myApp\dist\server.js:20:30)
at Module.<anonymous> (C:myApp\dist\server.js:151309:76)
at __webpack_require__ (C:myApp\dist\server.js:20:30)
at Object.@fullcalendar/angular (C:myApp\dist\server.js:134654:18)
at __webpack_require__ (C:myApp\dist\server.js:131212:30)
at Module../node_modules/@fullcalendar/angular/fullcalendar-angular.ngfactory.js (C:myApp\dist\server.js:131336:79)
at __webpack_require__ (C:myApp\dist\server.js:131212:30)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! silver-home@0.0.0 serve:ssr: `node dist/server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the silver-home@0.0.0 serve:ssr script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\myUser\AppData\Roaming\npm-cache\_logs19-04-28T20_11_07_675Z-debug.log
npm 的内容debug.log：
0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'serve:ssr' ]
2 info using npm@6.4.1
3 info using node@v10.15.3
4 verbose run-script [ 'preserve:ssr', 'serve:ssr', 'postserve:ssr' ]
5 info lifecycle myApp@0.0.0~preserve:ssr: myApp@0.0.0
6 info lifecycle myApp@0.0.0~serve:ssr: myApp@0.0.0
7 verbose lifecycle myApp@0.0.0~serve:ssr: unsafe-perm in lifecycle true
8 verbose lifecycle myApp@0.0.0~serve:ssr: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\myApp\node_modules\.bin;C:\ProgramData\Oracle\Java\javapath;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\QuickTime\QTSystem\;C:\xampp\php;C:\ProgramData\ComposerSetup\bin;C:\WINDOWS\System32\OpenSSH\;C:\Program Files\Git\cmd;C:\Program Files (x86)\Bitvise SSH Client;C:\Program Files (x86)\AOMEI Backupper;C:\Program Files\nodejs\;C:\Program Files (x86)\GNU Tools Arm Embedded 2018-q2-update\bin;C:\Users\myUser\AppData\Local\Microsoft\WindowsApps;C:\Users\myUser\AppData\Roaming\Composer\vendor\bin;C:\Program Files (x86)\GnuWin32\bin;C:\mingw\bin;C:\Users\Uchendu\AppData\Roaming\npm;C:\Users\myUser\Desktop\Etudes\Math spec\programmation\bin;C:\Program Files\Java\jdk1.8.0_144\bin;
9 verbose lifecycle myApp@0.0.0~serve:ssr: CWD: C:myApp
10 silly lifecycle myApp@0.0.0~serve:ssr: Args: [ '/d /s /c', 'node dist/server' ]
11 silly lifecycle myApp@0.0.0~serve:ssr: Returned: code: 1 signal: null
12 info lifecycle myApp@0.0.0~serve:ssr: Failed to exec serve:ssr script
13 verbose stack Error: myApp@0.0.0 serve:ssr: `node dist/server`
13 verbose stack Exit status 1
13 verbose stack at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:301:16)
13 verbose stack at EventEmitter.emit (events.js:189:13)
13 verbose stack at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:189:13)
13 verbose stack at maybeClose (internal/child_process.js:970:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid myApp@0.0.0
15 verbose cwd C:\myApp
16 verbose Windows_NT 10.0.17134
17 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "serve:ssr"
18 verbose node v10.15.3
19 verbose npm v6.4.1
20 error code ELIFECYCLE
21 error errno 1
22 error myApp@0.0.0 serve:ssr: `node dist/server`
22 error Exit status 1
23 error Failed at the myApp@0.0.0 serve:ssr script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]
有什么解决问题的建议吗？
问题来自第三方库。
https://github.com/fullcalendar/fullcalendar-angular
ReferenceError: Element is not defined
at C:myApp\dist\server.js:151900:25
at C:myApp\dist\server.js:151801:13
at Object.<anonymous> (C:myApp\dist\server.js:151803:2)
at __webpack_require__ (C:myApp\dist\server.js:20:30)
at Module.<anonymous> (C:myApp\dist\server.js:151309:76)
at __webpack_require__ (C:myApp\dist\server.js:20:30)
at Object.@fullcalendar/angular (C:myApp\dist\server.js:134654:18)
at __webpack_require__ (C:myApp\dist\server.js:131212:30)
at Module../node_modules/@fullcalendar/angular/fullcalendar-angular.ngfactory.js (C:myApp\dist\server.js:131336:79)
at __webpack_require__ (C:myApp\dist\server.js:131212:30)
似乎未能导入 日历组件的组件工厂，这让我认为您缺少一些节点依赖项。
确认您已安装 @fullcalendar/core @fullcalendar/daygrid 软件包。
此库正在使用另一个 JavaScript 库（"core" 包），它不是为服务器端呈现而设计的。虽然您可以编译该项目。如果 "core" 库中有任何不能在 NodeJS 上 运行 的东西，那么它可能会编译失败或者 运行.
在您的 server.ts 文件中添加此行：
global['Event'] = null;
global['KeyboardEvent'] = null;
ReferenceError: window is not defined
at Object.<anonymous> (D:\bid\mii\pdfconvetor\dist\server\main.js:11220:30237)
at 5RHE.module.exports (D:\bid\mii\pdfconvetor\dist\server\main.js:11181:37)
at Object.5RHE (D:\bid\mii\pdfconvetor\dist\server\main.js:11183:112)
at __webpack_require__ (D:\bid\mii\pdfconvetor\dist\server\main.js:20:30)
at Module.K011 (D:\bid\mii\pdfconvetor\dist\server\main.js:61812:17)
at __webpack_require__ (D:\bid\mii\pdfconvetor\dist\server\main.js:20:30)
at Object.0 (D:\bid\mii\pdfconvetor\dist\server\main.js:992:18)
at __webpack_require__ (D:\bid\mii\pdfconvetor\dist\server\main.js:20:30)
at D:\bid\mii\pdfconvetor\dist\server\main.js:84:18
at Object.<anonymous> (D:\bid\mii\pdfconvetor\dist\server\main.js:87:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! pdfconvetor@0.0.0 serve:ssr: `node dist/server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the pdfconvetor@0.0.0 serve:ssr script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\mittal\AppData\Roaming\npm-cache\_logs19-08-02T10_47_18_582Z-debug.log