Angular SSR - ReferenceError:元素未定义

Angular SSR - ReferenceError:元素未定义

问题描述:

我正在开发一个 angular 7 项目.我使用服务器端渲染来允许 facebooks 爬虫正常工作.到目前为止,我已经开发了一些组件,还没有遇到任何问题.但是现在我遇到了一个问题,因为我正在使用 fullcalendar 处理一个组件...

I have an angular 7 project that I'm developping. I use server-side rendering to allow facebooks crawler to work properly. Until now, I've developped already some components and haven't encountered any troubles yet. But now I'm having a problem since I'm working on a component using fullcalendar...

使用 ng s 为应用程序提供服务没有任何问题.但是当我尝试使用服务器端渲染构建应用程序时 npm run build:ssr &&npm run serve:ssr,我现在收到以下错误:npm ERR!代码ELIFECYCLE

There are no troubles serving the application using ng s. But when I try to build the application using server-side rendering npm run build:ssr && npm run serve:ssr, I'm now receiving the following error: npm ERR! code ELIFECYCLE

直到现在我做了一个 npm installnpm audit fix 但这并没有帮助.我想这个问题来自我的任何一个错误的配置app.module.tsapp.server.module.ts 但我不知道.

Until now I made a npm install and npm audit fix but this hasn't helped. I suppose that the problem comes from a bad configuration in either my app.module.ts or app.server.module.ts but I can't figure it out.

这里是错误信息的内容:

Here the content of the error message:

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\_logs\2019-04-28T20_11_07_675Z-debug.log

npm debug.log 的内容:

Content of 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\7 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 ]

有什么建议可以解决这个问题吗?

Are there any suggestions how I can solve that problem?

问题来自第三方库.

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)

看起来它未能导入日历组件的组件工厂,这让我认为您缺少一些节点依赖项.

It looks like it's failing to import the component factory for the calendar component, and this makes me think that you're missing some node dependencies.

验证您是否已安装 @fullcalendar/core @fullcalendar/daygrid 软件包.

Verify that you've installed the @fullcalendar/core @fullcalendar/daygrid packages.

这个库使用了另一个 JavaScript 库(核心"包),它不是为服务器端渲染而设计的.虽然您可能能够编译该项目.如果核心"库中有任何东西不能在 NodeJS 上运行,那么它很可能无法编译或无法运行.

This library is using another JavaScript library (the "core" package) which isn't designed for server-side rendering. While you might be able to compile the project. If there is anything in the "core" library that can't run on NodeJS then it will likely fail to compile or will fail to run.