角度变化检测仅检测产品中的变化

Question

我遇到了一个奇怪的问题，我希望这只是一个简单的解决方法。 Angular 中的变更检测不仅仅在生产环境中起作用。

我使用 Angular 7 和 ngrx 作为状态管理构建了一个相当复杂的应用程序。有 2 个主要模块基于路由延迟加载。变更检测策略是 OnPush，99% 的应用程序遵循一种模式，数据来自服务器，通过 ngrx 效果到有状态组件，然后通过异步管道将数据推送到“虚拟”表示组件中。 示例：

this.loading$ = this.store.pipe(
  select(selector.isLoading),
  takeUntil(this.unsubscribe$)
);

<app-loading [loading]="loading$ | async"></app-loading>

在ng serve 和ng serve --prod 上，一切正常，没有问题。然而，在运行 ng build --prod 并将 js 文件推送到我们的 .net 解决方案后，更改检测停止工作。

“停止工作”是什么意思？我的意思是它不会改变任何模型或组件，除非发生了 DOM 事件。

例如，使用上面显示的代码，有一个加载微调器会一直显示，直到数据来自服务器。在生产中，微调器会一直停留在屏幕上，直到您随意点击。然后应用程序刷新并显示数据。此问题在整个应用程序中持续存在。也就是说，这个问题不仅仅发生在那里。

应用程序在 .Net 解决方案中的 .cshtml 文件中加载，如下所示：

<script type="text/javascript" src="runtime.js"></script>
<script type="text/javascript" src="polyfills.js"></script>
<script type="text/javascript" src="main.js"></script>

延迟加载的模块位于 .cshtml 文件的文件夹中，并且没有显示任何错误，因此我必须假设一切都已正确连接。

同样，这仅在产品包中。不在 dev 或 serve 或 prod 模式下服务。

Answer 1

对于来自操作员的 rxjs，这最终是一个非常奇怪的情况。

应用程序使用 signalR 作为客户端和服务器之间的 API。与集线器的大部分交互都是一个 jquery 承诺。我使用 from 运算符返回数据。

return from(this.proxy.invoke(...args));

由于我无法弄清楚的原因，这在开发中有效。但是观察者不会在生产中完成，所以即使状态会更新，视图仍在等待观察者完成。

我更新了代码以在连接时返回一个 observable。

private async performInvoke(...argu): Promise {
  return await this.proxy.invoke(...argu);
}

invoke(...argu): Observable<any> {
  return new Observable(o =>
    const pInvoke = async () => {
      o.next(await this.performInvoke(...argu));
      o.complete();
    }
}

我在这里进行了简化，因此如果您发现此问题，请确保添加尝试捕获和其他错误保护。