标签: zonejs

我有一个使用Google Maps JavaScript API的Ionic 2 beta 7应用程序(也发生在Beta 6中).

如果我在地图上单击,拖动它并在释放单击之前"抛出"地图,它会在下次拖动地图时尝试发生此错误.

这是JavaScript堆栈跟踪

TypeError:无法在对象的.r.Kj(https://maps.googleapis.com/maps-api-v3/api/js/25/7/common.js:215:70)读取null的属性'ca' .dy上的.B.trigger(https://maps.googleapis.com/maps/api/js?key=MYKEY:93:119)(https://maps.googleapis.com/maps-api-v3/api/ js/25/7/common.js:164:140)at.(https://maps.googleapis.com/maps-api-v3/api/js/25/7/common.js:163:441)在对象._.B.trigger(https://maps.googleapis. com/maps/api/js？key = MYKEY:93:119)at .r.dl(https://maps.googleapis.com/maps-api-v3/api/js/25/7/common.js: 228:350)在Kv.Zonerlegate.invokeTask上的.r.fm(https://maps.googleapis.com/maps-api-v3/api/js/25/7/common.js:195:106)(http:// localhost:8100/build/js/zone.js:356:38)在ZoneTask.invoke的Zone.runTask(http:// localhost:8100/build/js/zone.js:256:48)中(http:// localhost:8100/build/js/zone.js:423:34)

虽然从用户的角度来看似乎没有引起任何UI问题,但是知道是否有办法防止这种情况发生会很好吗？

注意

拖动地图并在鼠标静止时释放它,在下一次拖动时不会发生此错误.

Plunker示例

我创建了一个Plunker示例来复制问题.跟着这些步骤:

1. 开放Developer Tools(F12)
2. 拖动并抛出地图
3. 再次尝试并拖动地图
4. 抛出错误并写入控制台

更新

问题堆栈跟踪和标题已更新,以匹配Ionic 2 beta 10中捕获的内容

跟踪GitHub

此问题已在ZoneJS GitHub页面上提出,因此您可以在此处进行跟踪

我刚刚开始进入Angular2变化检测机制.

我已经阅读了关于这个主题的那篇文章(在ZoneJS和Angular2区域上的文章),但仍然有一个术语我找不到任何定义.

以下是这篇文章的摘录:

NgZone基本上是一个扩展其API的分叉区域,并为其执行上下文添加了一些额外的功能.它添加到API的一件事是我们可以订阅的以下一组自定义事件,因为它们是可观察的流:

onTurnStart() - 在Angular事件开始之前通知订阅者.每个由Angular处理的浏览器任务发出一次事件.

onTurnDone() - 在Angular的区域完成后处理当前转弯以及从该回合计划的任何微任务后立即通知订户.

onEventDone() - 在结束VM事件之前,在最终的onTurnDone()回调之后立即通知订阅者.用于测试以验证应用程序状态

我明白了一个区域的概念,它可以分叉,我唯一的问题是VM turn和VM event,为此,我找不到任何定义.

这些VM事件和转弯是什么？他们是ZoneJS,Angular还是浏览器的一部分？

谢谢,Avi.

8月28日更新:下面完全相同的软件包配置,但zone.js 0.8.16不会产生任何错误.知道为什么吗？

编辑:我一直试图找出问题的来源.如果这是一个无限循环,它究竟发生了什么,但我无法破解polyfill或vendor中的代码.

我正在使用Firebase Hosting部署我的Angular应用程序.使用localhost进行编译和测试时,一切正常.但是当我在Firebase Hosting上部署时,我的实时站点永远无法绕过使用Auth0登录,在控制台中无休止地给出了同样的错误.如何确切地找出导致错误的原因？

Uncaught RangeError: Maximum call stack size exceeded
(anonymous) @ polyfills.70fc3f963669a0ddfcd2.bundle.js:1
o.(anonymous function) @ polyfills.70fc3f963669a0ddfcd2.bundle.js:1
(anonymous) @ vendor.bd83d2a24392414468c4.bundle.js:1
_makeRequest @ vendor.bd83d2a24392414468c4.bundle.js:1
_sendProcessedPayload @ vendor.bd83d2a24392414468c4.bundle.js:1
_send @ vendor.bd83d2a24392414468c4.bundle.js:1
_processException @ vendor.bd83d2a24392414468c4.bundle.js:1
_handleStackInfo @ vendor.bd83d2a24392414468c4.bundle.js:1
captureException @ vendor.bd83d2a24392414468c4.bundle.js:1
r @ vendor.bd83d2a24392414468c4.bundle.js:1
L @ polyfills.70fc3f963669a0ddfcd2.bundle.js:1
r @ vendor.bd83d2a24392414468c4.bundle.js:1
L @ polyfills.70fc3f963669a0ddfcd2.bundle.js:1
r @ vendor.bd83d2a24392414468c4.bundle.js:1
L @ polyfills.70fc3f963669a0ddfcd2.bundle.js:1
r @ vendor.bd83d2a24392414468c4.bundle.js:1
L @ polyfills.70fc3f963669a0ddfcd2.bundle.js:1
r @ vendor.bd83d2a24392414468c4.bundle.js:1
L @ polyfills.70fc3f963669a0ddfcd2.bundle.js:1
r @ vendor.bd83d2a24392414468c4.bundle.js:1
L @ polyfills.70fc3f963669a0ddfcd2.bundle.js:1
r …

我从 Angular 9.17 升级到 9.19，现在 ng build 失败并出现以下错误，抱怨@types/node 和 zone.js 中的变量声明：

node_modules/@types/node/ts3.5/globals.global.d.ts:1:13 中的错误 - 错误 TS2403：后续变量声明必须具有相同的类型。变量“global”必须是“Global”类型，但这里的类型是“Global & typeof globalThis”。

1 声明var global: NodeJS.Global & typeof globalThis; ~~~~~~

node_modules/zone.js/dist/zone.js.d.ts:600:13 600 声明 var global: NodeJS.Global; ~~~~~~ 'global' 也在这里声明。

升级前运行良好，现在无法构建。这是唯一的变化。

请帮忙。

我的 package.json

{
  "name": "myapp",
  "private": true,
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "start": "echo hello && ng serve --live-reload=false",
    "build": "node --max_old_space_size=4096 ng build",
    "build:ssr": "ng run MIC:server:dev",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "postcss": {},
  "dependencies": …

我正在测试 Angular 16 信号，根据我的理解，当我禁用 zone.js 并调用 signal.update() 时，视图应该更新为新值。它不是。请帮助我理解为什么。

主要.ts

platformBrowserDynamic().bootstrapModule(AppModule, { ngZone: 'noop' })
    .catch(err => console.error(err));

应用程序组件.ts

@Component({
    selector: 'app-root',
    template: '
        <h1>{{ title() }}</h1>
        <button (click)="click()">Change</button>
    ',
})
export class AppComponent {
    title = signal('Hello');

    click(): void {
        this.title.update((value) => value + "!!");
    }
}

我期望单击按钮后，“标题”的值将从“Hello”更新为“Hello!!”。它没有更新。

我正在研究angular2"2.0.0-rc.1"但是zoneJS给出了以下错误

Error: Uncaught (in promise): Expected 'styles' to be an array of strings.
    at resolvePromise (zone.js:538)
    at zone.js:515
    at ZoneDelegate.invoke (zone.js:323)
    at Object.NgZoneImpl.inner.inner.fork.onInvoke (eval at <anonymous> (vendor.js:335), <anonymous>:45:41)
    at ZoneDelegate.invoke (zone.js:322)
    at Zone.run (zone.js:216)
    at zone.js:571
    at ZoneDelegate.invokeTask (zone.js:356)
    at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (eval at <anonymous> (vendor.js:335), <anonymous>:36:41)
    at ZoneDelegate.invokeTask (zone.js:355)

我的代码如下

let styles   = require('./dashboard.css');
let template = require('./dashboard.html');
declare var zingchart:any;

@Component({
  selector: 'dashboard',
  directives: [ RouterLink, CORE_DIRECTIVES, FORM_DIRECTIVES ],
  template: template,
  styles: [ styles ]
})

我在尝试(click)在Angular 2中的事件回调函数内执行某些逻辑时遇到了很大麻烦,而没有触发变化检测.

为什么我不想触发变化检测

回调函数执行简单的动画滚动到顶部.它不会影响其他任何组件,因此我不需要在每个组件中进行变化检测,实际上我真的不希望它开火!由于变化检测在每个组件中都会触发,因此动画在移动设备上的性能极差.

我试过的

我知道我可以使用区域外的代码运行

this._zone.runOutsideAngular(() => {
    someFunction();
})

这很好地工作,当你想向区外运行的代码不是由调用click,keyup,keydown事件等.

因为我的组件看起来像......

<button (click)="doThing()">Do that thing outside the zone!</button>

doThing() {
    this._zone.runOutsideAngular(() => {
        myFunction();
    })
}

... myFunction将在区域外运行,但click事件将触发变化检测.

我已经OnPush在尽可能多的组件中实现了变更检测策略.

重要的是,此处不会触发更改检测,但我找不到阻止它的方法.

编辑 请参见此plnk,并OnPush在所有组件中设置更改检测.单击子行组件按钮会在子行,行和应用程序组件中触发CD.

我最近开始使用升级模块将 AngularJS 应用程序迁移到 Angular 4。

我的 AngularJS 指令之一使用第三方库 ( ngFlow ) 使用XMLHttpRequest.send(). 在混合模式下运行时，上传在 Chrome 和 Firefox 中都可以正常工作。但是，在 Safari 中，应用程序在上传过程中变得非常缓慢，并且浏览器进程的 CPU 使用率达到 100%。

使用 Safari 网络工具，我看到有很多globalZoneAwareCallback来自 zone.js的调用。

我的印象是 Angular 区域正在为XMLHttpRequest上传期间发生的每个进度事件启动更改检测。

我知道我可以使用runOutsideAngularfromNgZone来避免这种情况，但我不知道如何在第三方 AngularJS 库中发生异步调用的情况下使用它，或者是否有任何其他解决方案可以解决此问题。

我尝试使用（dist/index.html）从打字稿包加载我的角度构建。它的加载正常，但是当我返回并再次尝试加载相同的内容时，它显示以下错误。

VM5485:1 未捕获错误：区域已加载。在新的 d (:1:211206)

VM5457:1 未捕获错误：Zone.js 检测到 ZoneAwarePromise(window|global).Promise已被覆盖。

我尝试过：从polyfills.ts中删除zone.js并添加“angularfire2”：“5.0.0-rc.4”。

但没有运气。有人可以帮忙吗

我使用 angular CLI (v6.1.4) 通过运行在我的 components 文件夹中生成了一个组件，ng g c components/foo然后运行ng test. 新组件的测试失败并出现以下错误：

async() 测试助手需要区域但找不到。请确保您的环境包括 zone.js/dist/zone.js 抛出

错误：非法状态：无法加载指令 FooComponent 的摘要。

奇怪的是，如果我运行ng g c foo（即它不在 components 文件夹中生成），则测试通过。我的测试都适用于其他文件夹，但这是我的 components 文件夹中的第一个测试（也是一个组件的第一个测试）。其他测试都不是异步的。

我是新手，ng test所以我可能会遗漏一些非常明显的东西。我没想到需要设置任何东西zone.js来运行默认测试。我应该在哪里配置它？还是我在这里遗漏了其他东西，也许是我的components文件夹特有的东西？