0

我有一个奇怪的问题，我希望这只是一个简单的解决方法。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 模式下服务。

4

1 回答 1

1

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

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

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

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

我更新了代码以返回一个可观察的连接。

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();
    }
}

我在这里进行了简化，所以如果你发现这个，请确保添加尝试捕获和其他错误保护。

于 2019-08-28T18:18:33.930 回答