如何修复 process.nextTick 不是 Calgolia places.js 的功能？

Question

我已经通过 NPM 在我的 Angular 7 项目中安装了 Calgolia places.js，但我遇到了一个问题。 我创建了一个表单，这个输入应该是表单字段之一。

<form [formGroup]="myForm">
      <pre style="color: white; background-color: #000;">
        Value: {{myForm.value | json}}
      </pre>
      <mat-form-field class="first-form-half-width">
        <input id="address-input" matInput placeholder="Pick up:" formControlName="pickUp">
      </mat-form-field>
</form>

我想将输入值放入我的 JSON 中。 但是我有一个问题 - 当我在输入中键入“Los A”并按“Los Angeles”进入自动完成功能时，我的输入“Los Angeles”中有文本内容，但在我的 JSON 中仍然是“Los A”。 但是如果我在“Los Angeles”之后输入一些内容，例如“abc”，JSON 会更新并且出现“Los Angelesabc”。 另外，当我单击输入时，控制台中出现错误

ERROR TypeError: process.nextTick is not a function
    at nextTick.js:9
    at immediate (index.js:94)
    at Input.trigger (event_emitter.js:76)
    at Input.onFocus [as _onFocus] (input.js:100)
    at HTMLInputElement.proxyFn (zepto.js:1033)
    at HTMLInputElement.handler.proxy (zepto.js:1007)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17290)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
defaultErrorLogger @ core.js:15724
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:15772
next @ core.js:17771
schedulerFn @ core.js:13515
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:196
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:134
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:13499
(anonymous) @ core.js:17321
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:17258
onHandleError @ core.js:17321
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:395
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:198
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1744
globalZoneAwareCallback @ zone.js:1781

有没有可能解决这个问题？

Answer 1

node.js 应用程序中不存在诸如“窗口”之类的常量，因为它不位于视口中。 创建如下所示的占位符函数来克服错误：

(window as any).process = {
   env: { DEBUG: undefined },
   nextTick: function() {
     return null;
   }
};

Answer 2

process.nextTick是一个只存在于 node.js 中的函数。 它在浏览器中不存在，因此您得到了错误。 这里发生的是您在浏览器中包含一个仅用于 node.js 的库。

如果不详细了解您正在使用哪些库以及如何使用它们，很难准确判断这是哪个库。

---

编辑如果您无法弄清楚发生了什么，那么在浏览器中修改 nextTick 函数同样容易。 请参阅此处的示例。

本质上，您只是将setTimeout(fn, 0)别名为nextTick 。 有一些复杂性和极端情况，但想法很简单。

我不确定为什么nextTick在构建过程中没有被猴子修补，也许你应该看看为什么。 但是，如果您无法弄清楚，那么自己修补它是安全的。

Answer 3

您还可以填充进程依赖项：

npm 安装过程

import * as process from "process";
window.process = process;

使用诸如windows.process.nextTick = setTimeout类的东西对我来说性能很差。