首页 > 解决方案 > 在 Angular 8 应用程序中使用 Angular Universal 调试编译错误错误

问题描述

简短的背景故事

我一直在对 Angular 8 应用程序进行多次升级,例如服务器端渲染和 Google Analytics。正如大多数开发人员所做的那样,我会先编写代码然后进行测试,然后继续下一个任务。通常ng serve,我在开发时用来运行应用程序。

使用服务器端渲染,要测试速度、延迟加载的图像等,您需要使用在生成的 JS 文件上运行的 node express 服务器。在构建等之后,我使用Node prerender(我的 js 文件是 prerender.js)来查看应用程序在服务器上预渲染的样子。

当我运行这个命令时,我不应该得到任何错误,而且我知道我的 prender 文件将在端口 4000 上启动一个本地服务器。

问题

我在运行 node express 服务器时遇到错误,但在运行时我没有遇到ng serve我最近收到的错误消息:

Unhandled Promise rejection: Cannot read property 'subscribe' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'subscribe' of undefined
    at new ApplicationRef (C:\4towerdevelopment\dist-stage\server\main.js:45910:37)
    at _createClass (C:\4towerdevelopment\dist-stage\server\main.js:37184:20)
    at _createProviderInstance (C:\4towerdevelopment\dist-stage\server\main.js:37138:26)
    at initNgModule (C:\4towerdevelopment\dist-stage\server\main.js:37044:32)
    at new NgModuleRef_ (C:\4towerdevelopment\dist-stage\server\main.js:38176:9)
    at Object.createNgModuleRef (C:\4towerdevelopment\dist-stage\server\main.js:38159:12)
    at NgModuleFactory_.create (C:\4towerdevelopment\dist-stage\server\main.js:50821:25)
    at C:\4towerdevelopment\dist-stage\prerender.js:29175:43
    at ZoneDelegate.invoke (C:\4towerdevelopment\dist-stage\prerender.js:481:26)
    at Object.onInvoke (C:\4towerdevelopment\dist-stage\prerender.js:28683:33) TypeError: Cannot read property 'subscribe' of undefined
    at new ApplicationRef (C:\4towerdevelopment\dist-stage\server\main.js:45910:37)
    at _createClass (C:\4towerdevelopment\dist-stage\server\main.js:37184:20)
    at _createProviderInstance (C:\4towerdevelopment\dist-stage\server\main.js:37138:26)
    at initNgModule (C:\4towerdevelopment\dist-stage\server\main.js:37044:32)
    at new NgModuleRef_ (C:\4towerdevelopment\dist-stage\server\main.js:38176:9)
    at Object.createNgModuleRef (C:\4towerdevelopment\dist-stage\server\main.js:38159:12)
    at NgModuleFactory_.create (C:\4towerdevelopment\dist-stage\server\main.js:50821:25)
    at C:\4towerdevelopment\dist-stage\prerender.js:29175:43
    at ZoneDelegate.invoke (C:\4towerdevelopment\dist-stage\prerender.js:481:26)
    at Object.onInvoke (C:\4towerdevelopment\dist-stage\prerender.js:28683:33)

这让我最接近于弄清楚究竟是什么导致了问题是让我知道某个地方的提供者导致了这个错误。看起来某些东西应该是可观察的,而不是订阅。除此之外,我想我只是开始浏览我的供应商。我的问题是:

  1. 如何在使用开发时强制 Angular 可能抛出此错误ng serve
  2. 如果我不能,除了梳理每个提供者之外,还有更好的方法来调试这个当前错误吗?或者至少有一种方法可以判断是什么服务导致了问题?

谢谢你。

更新:这里有问题的基本回购。我创建了一个新的 Angular 项目,确保依赖项是最新的,根据这篇文章安装了 ngUniversal ,并在运行时收到了同样的 Unhandled promise 消息node prerender

我逐字访问了 Angular cli 网站,创建了一个新项目(默认安装的 Angular 版本是 8.3),安装了 Angular Universal,并尝试构建。与上述相同的错误消息。

标签: node.jsangularserver-side-rendering

解决方案


这看起来像是ApplicationRef触发了错误,并且该类是由 Angular 核心内部提供的。

subscribe它可能在类的构造函数中失败,并且对 Zone 可观察对象有一些调用。我认为您不会在源代码中找到与此错误直接相关的任何内容。它看起来像一个构建配置问题。

https://github.com/angular/angular/blob/bb52fb798c8578c461d21aee2b7623232184a5d3/packages/core/src/application_ref.ts#L562

我不知道什么可能会产生这个问题,但我会用 SSR 开始一个新项目,并将差异与您当前的项目进行比较。


推荐阅读