问题标签 [zonejs]

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

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

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

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

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

当前行为

目前我在具有151.101.1.195的 Firebase 主机上托管Angular ，而我的 API 位于 IP为 23.98.64.158的 azure 服务器上

然后我在我的角度 v6.1.7 中使用以下行发送 POST 请求

它假设在23.98.64.158向我的 Azure API 服务器发出一个 OPTIONS 请求，然后仅 POST，但不知何故它会先 POST、OPTION 然后 POST。查看 chrome devtool 网络选项卡，显示我的请求针对第一个 POST（不应该）发送到 firebase ip 151.101.1.195 ，但随后的 OPTION 和 POST 请求解析为更正 azure IP 23.98.64.158

这是我抓取的 devtool 标题一般信息，表明它已发布到错误Remote Address 的 151.101.1.195

然后后续请求指向正确的 Azure IP

预期行为

我应该只看到调用 OPTION 和 POST 到 https://someazuresite.azurewebsites.net/api/do/something并解析为 AZURE IP only Remote Address: 23.98.64.158:443 为什么 zone.js 开始 POST 到错误的 firebase IP ?

使用说明最小化重现问题

改变行为的动机/用例是什么？

环境

我的 package.json

该项目编译成功，但在我的浏览器中引发错误：

错误

任何帮助将不胜感激，谢谢

我正面临使用 Angular Elements 构建小部件的奇怪行为。我创建了一个小部件来在另一个站点上弹出一个简单的反馈表单，也使用 Angular 构建，并且在开发中工作得很好，但是当我构建应用程序以进行生产时，小部件和一些延迟加载的模块之间存在不兼容。

首次加载应用程序时，小部件会从外部 URL 加载到应用程序中。然后我登录到应用程序，当一个模块被延迟加载时，它会报告以下错误

一些上下文信息：

• 小部件是使用 "@angular/elements": "^7.0.1" 构建的
• 该小部件正在使用 pollyfill，因为 Web 组件尚未被广泛采用。
• pollyfills 使用 Zone.js
• 该应用程序是使用 Angular 7.0.1 构建的

深入研究这个模糊的错误消息，我发现这与应用程序和小部件两次加载的 Zone.js 有关，这是与此相关的问题 - https://github.com/angular/angular/issues/24466 - https ://github.com/angular/angular/issues/24181 - https://github.com/angular/angular/issues/26158

我也尝试过这个解决方案，但没有成功： - https://www.npmjs.com/package/elements-zone-strategy

我是 Angular Elements 的新手，任何帮助都将不胜感激。

背景故事：昨天我需要将我的应用程序从 Angular 5.2.9 更新到 6，所以我想“为什么不在我这样做的时候去 7。” 所以当然这花了一整天的时间，并且需要对很多文件进行大量更改（主要是因为 Rxjs），但无论如何，到一天结束时，我能够做到ng serve并且没有错误地编译它！

但是当我去localhost:4200运行该应用程序时，它在“正在加载...”时停止，并在 DevTools 控制台中显示以下消息：

我试图确保我所有的包都是最新的。npm install给出了一些关于 fsevents 的错误，但是zone是最新的。

所以我现在不知道该怎么办。我不知道错误消息真正想告诉我什么，或者它是否合法。我做了ng new并检查了生成的文件，那里没有“zone.js setup”代码，所以我没有错过类似的东西。我觉得我已经非常接近进行此更新工作了，但是当然，如​​果该应用程序无法运行，那就不好了！谷歌搜索此错误消息并没有发现任何有用的信息（无论如何对我来说）。

我正在使用 Angular 7 并面临一个问题 => 在成功登录 API GET 调用并且组件也接收数据后，但 UI 没有显示该数据。

当我打开浏览器控制台时，数据会立即填充到 UI 上，并且控制台中会显示警告。

“core.js:15686 导航在 Angular 区域外触发，您是否忘记调用 'ngZone.run()'？”

我用谷歌搜索了这个警告并找到了一些解决方法，比如在其中this.ngZone.run()调用我的 API。

但问题是，我使用了 40 多个组件并在每个组件中调用了如此多的 API。所以我必须调用ngZone.run()每个 API 调用，这似乎很难做到。

请建议我更好的方法来克服这个问题。提前致谢。

app.component.ts

应用服务.ts

我用 Angular 制作了一个 Ionic 应用程序，我需要用物理条形码阅读器读取条形码。
这个阅读器通常就像一个物理键盘，它在读取条形码后发送键盘事件。
所以我制作了一个脚本来捕获窗口对象上的键盘事件，因为用户可以在输入之外读取条形码，并且我将键盘事件转换为可观察的，这将“发出”完整的条形码。该脚本按预期工作，但我谈论它是因为我认为存在与我的问题的链接......<br>在我页面的 TypeScript 文件（离子页面，一个角度组件）中，我订阅了我的 observable（我谈到的那个）关于以前……）。
订阅很简单，我只是在做了一些检查步骤后将条形码添加到 Set<string> 中。或者，这些步骤返回一个 Promise，当 Promise 解决时我添加条形码……<br> 条形码集显示在 ngFor 循环中的 html 文件中。
当条形码阅读器读取条形码时，它被添加到集合中，但 UI 没有刷新……<br> 我很确定我错过了一些东西，也许是关于 NgZone，我真的不知道……</p>

如果我添加条形码而不调用检查步骤（未调用异步代码），则 UI 将刷新。
我还尝试使用模拟条形码扫描仪的硬编码按钮调用检查步骤，并且它可以工作......<br>所以问题是在承诺解决后添加条形码并且条形码来自窗口键盘事件制作的观察者…</p>

观察码条阅读器：

页面的 TypeScript 文件（MArticle 是一个对 Article 对象有不同方法的服务。在这个类中，我使用它来检查 DB 中的 Article 对象上是否已经知道条形码）：

页面的 HTML 代码：

当我单击«加号»按钮时，条形码被添加到列表中并且 UI 被刷新。
当我使用物理条码扫描仪扫描条码时，会添加条码，但不会刷新 UI。
我确实期望两种模式之间的行为相同......<br>我认为这可能是一个 NgZone 问题，但我不是这方面的专家......<br>我想我错过了一些东西，但是什么......</p>

TLDR

• 将鼠标移到 Angular 组件上 - 一切都很好！
• 将鼠标移到 AngularJS 组件上 - 非常高的 CPU 负载，性能问题，为什么？

我们有一个 Angular 混合应用程序。使用的版本是：

• 角度：7.1.3
• AngularJS：1.7.5
• zone.js：0.8.28

不幸的是，我们有大量的性能问题。我发现，当您移动鼠标时，CPU 负载会达到 100% 。

奇怪的是：已经升级到 Angular 的组件没有这种行为！当您移动鼠标时，大麦不会对 CPU 监视器产生影响。然而，在尚未升级的旧 AngularJS 组件中，如下图所示。

在 zone.js 中，我们使用了黑名单，如此处所述

polyfills.js，（通过index.html导入）

那么我们如何解决这个问题，AngularJS 部分没有这个巨大的性能问题呢？

我的应用程序正在使用 angular5.0 和材料，一切正常。我也在使用延迟加载（如果有什么会改变它），现在我已经在这个页面https://update.angular.io/的帮助下完成了升级。之后我改变了我的 Observables（在它被包含在 RxJS/Observable 之前）并且还将错误处理从 catch 更改为 pipe(catchError(...)) 但即使在那之后我也看到了这个错误。有没有人从 angular 5 更新到 7，如果你解决了这个问题，请告诉我。

这是我的错误

这就是我的包裹儿子的样子 "dependencies": { "@angular/animations": "^7.2.1", "@angular/cdk": "^7.2.1", "@angular/common": "~7.2.0", "@angular/compiler": "~7.2.0", "@angular/core": "~7.2.0", "@angular/forms": "~7.2.0", "@angular/material": "^7.2.1", "@angular/platform-browser": "~7.2.0", "@angular/platform-browser-dynamic": "~7.2.0", "@angular/router": "~7.2.0", "@angular-devkit/core": "^0.4.0", "@angular/http": "^7.2.1", "@ng-bootstrap/ng-bootstrap": "^4.0.1", "@types/lodash": "^4.14.64", "angular-sortablejs": "^2.5.2", "angular2-datetimepicker": "^1.1.1", "angular2-moment": "^1.6.0", "angular2-notifications": "^0.7.4", "bootstrap": "^3.3.7", "font-awesome": "^4.7.0", "git-describe": "^4.0.2", "hammerjs": "^2.0.8", "lodash": "^4.17.4", "mdn-polyfills": "^3.5.0", "moment": "^2.18.1", "ng-pick-datetime": "^7.0.0", "ng2-notify-popup": "^0.1.24", "ngx-dropdown": "0.0.22", "ngx-loading": "1.0.8", "ngx-mat-select-search": "^1.4.1", "sortablejs": "^1.7.0", "core-js": "^2.5.4", "rxjs": "~6.3.3", "tslib": "^1.9.0", "zone.js": "~0.8.28" }, "devDependencies": { "@angular-devkit/build-angular": "~0.12.0", "@angular/cli": "~7.2.2", "@angular/compiler-cli": "~7.2.0", "@angular/language-service": "~7.2.0", "@types/jasmine": "~2.8.8", "@types/jasminewd2": "~2.0.3", "@types/lodash": "^4.14.64", "@types/node": "~8.9.4", "codelyzer": "~4.5.0", "fs-extra": "^7.0.1", "jasmine-core": "~2.5.2", "jasmine-spec-reporter": "~4.1.0", "karma": "^3.1.4", "karma-chrome-launcher": "~2.1.1", "karma-cli": "~1.0.1", "karma-coverage": "^1.1.1", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "karma-junit-reporter": "^1.2.0", "protractor": "~5.4.0", "puppeteer": "^1.2.0", "ts-node": "~7.0.0", "tslint": "~5.11.0", "typescript": "~3.2.2" } }

这是我的分析器为使用 angular-cli 构建的 Angular 7 应用程序显示的内容。

每个函数调用都捆绑在 下zone.js，我无法获得有关运行时间和运行时间的有用信息。

该应用程序正在运行：ng serve，我认为处于调试模式：

在 main.ts

在运行时，enableProdMode()不会被调用。

我认为我angular.json将 webpack 配置为在生产模式下运行，但它与使用ng new（区分它们）的新项目完全相同，除了添加一些外部脚本 + scss 文件。