标签: zone.js

我正在试验区域(zone.js),我意识到我不知道从根到打出错误的当前区域打印所有区域的最佳方法是什么.

例如,此代码使用两个嵌套回调,setTimeout()然后调用一个failedFunc()抛出错误的函数:

require('zone.js');

function failedFunc() {
  throw new Error("it's broken");
}

let rootZone = Zone.current;

function func1() {
  let zoneA = rootZone.fork({name: 'zoneA'});
  zoneA.run(() => {
    setTimeout(() => func2());
  });
}

function func2() {
  let zoneB = Zone.current.fork({name: 'zoneB'});

  zoneB.run(() => {
    setTimeout(() => failedFunc());
  });
}

func1();

当我运行此示例时,它提供以下输出:

/.../zone-test/node_modules/zone.js/dist/zone-node.js:170
                        throw error;
                        ^
Error: it's broken
    at new Error (native)
    at failedFunc (/.../zone-test/zone_02.js:12:9) [zoneB]
    at Timeout.setTimeout (/.../zone-test/zone_02.js:28:22) [zoneB]
    at Zone.runTask (/.../zone-test/node_modules/zone.js/dist/zone-node.js:166:47) [<root> …

可能我对问题太迟了,但无论如何.

有人可以解释我在什么情况下我需要导入区域的补丁 - zone.js/dist/zone-patch-rxjs.据我所知,补丁被添加到这个PR(这个的继承者).

我使用zone和RxJs在我的Angular项目中,尽管make rxjs run in correct zone在PR的描述中看到我不完全理解它何时可以帮助我或它应该为我解决什么问题.

我会很感激像之前/之后的一些代码示例.

提前致谢.

我刚刚开始为我的应用程序编写e2e测试,并且遇到了Protractor和ngrx/effects的超时问题.

我每隔几分钟调度一次动作有以下效果:

@Effect() setSessionTimer$ = this.actions$
        .ofType(Auth.ActionTypes.SET_SECONDS_LEFT)
        .map(toPayload)
        .switchMap(secondsLeft => Observable.concat(
            Observable.timer((secondsLeft - 60) * 1000).map(_ => new Auth.SessionExpiringAction(60)),
            Observable.timer(60 * 1000).map(_ => new Auth.SessionExpiredAction())
        ));

尝试运行Protractor测试会导致测试超时并出现以下错误,因为Angular不稳定.

失败:超时等待异步Angular任务在11秒后完成.这可能是因为当前页面不是Angular应用程序.有关更多详细信息,请参阅常见问题解答:https: //github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular 在等待带定位符的元素时 - 定位器:By(css选择器,.工具栏标题)

根据这个问题(https://github.com/angular/protractor/issues/3349)我需要使用NgZone在Angular之外运行一个Observable区间.我尝试了不同的组合this.ngZone.runOutsideAngular()但没有工作,测试继续超时.

例如,这不起作用:

@Effect() setSessionTimer$ = this.actions$
        .ofType(Auth.ActionTypes.SET_SECONDS_LEFT)
        .map(toPayload)
        .switchMap(secondsLeft => this.ngZone.runOutsideAngular(() => Observable.concat(
            Observable.timer((secondsLeft - 60) * 1000).map(_ => new Auth.SessionExpiringAction(60)),
            Observable.timer(60 * 1000).map(_ => new Auth.SessionExpiredAction())
        )));

我不知道如何在Angular之外运行效果.有没有人成功测试过他们的ngrx应用程序？

我最近将我公司的网站从React迁移到了Angular,因为我们的大多数项目都已经在Angular 7上了.作为"使用 - 最新和最伟大"的人,我决定实现服务器端渲染获得谷歌网页速度评级接近100/100(目前为42/100).我一直在修补这个星期的大部分时间,但没有成功 - 最新的障碍对我来说特别难以克服.这是关于我的设置的简要信息,然后我会详细介绍:

• NodeJS 8.9.1
• Angular 7最新
• Webpack 4.26.0
• @ ngtools/webpack 7.0.5
• 不使用angular-cli
• AoT设置
• 单页应用

当我尝试渲染为SSR设置的layout.html文件时,这是我得到的错误:

TypeError: Cannot read property 'subscribe' of undefined
at new ApplicationRef (C:\code\lemmsoftWebsite\repo\public\site\serverBuild\main.js:43263:37)
at _createClass (C:\code\lemmsoftWebsite\repo\public\site\serverBuild\main.js:46296:20)
at _createProviderInstance (C:\code\lemmsoftWebsite\repo\public\site\serverBuild\main.js:46258:26)
at initNgModule (C:\code\lemmsoftWebsite\repo\public\site\serverBuild\main.js:46190:32)
at new NgModuleRef_ (C:\code\lemmsoftWebsite\repo\public\site\serverBuild\main.js:46918:9)
at createNgModuleRef (C:\code\lemmsoftWebsite\repo\public\site\serverBuild\main.js:46907:12)
at Object.debugCreateNgModuleRef [as createNgModuleRef] (C:\code\lemmsoftWebsite\repo\public\site\serverBuild\main.js:48738:12)
at NgModuleFactory_.module.exports.NgModuleFactory_.create (C:\code\lemmsoftWebsite\repo\public\site\serverBuild\main.js:49466:25)
at C:\code\lemmsoftWebsite\repo\node_modules\@angular\core\bundles\core.umd.js:14656:47
at ZoneDelegate.module.exports.ZoneDelegate.invoke (C:\code\lemmsoftWebsite\repo\public\site\serverBuild\main.js:139510:26)
at Object.onInvoke (C:\code\lemmsoftWebsite\repo\node_modules\@angular\core\bundles\core.umd.js:14194:37)
at ZoneDelegate.module.exports.ZoneDelegate.invoke (C:\code\lemmsoftWebsite\repo\public\site\serverBuild\main.js:139509:32)
at Zone.module.exports.Zone.run (C:\code\lemmsoftWebsite\repo\public\site\serverBuild\main.js:139260:43)
at NgZone.run (C:\code\lemmsoftWebsite\repo\node_modules\@angular\core\bundles\core.umd.js:14108:32)
at PlatformRef.bootstrapModuleFactory (C:\code\lemmsoftWebsite\repo\node_modules\@angular\core\bundles\core.umd.js:14654:27)
at renderModuleFactory (C:\code\lemmsoftWebsite\repo\node_modules\@angular\platform-server\bundles\platform-server.umd.js:1033:43)
at View.module.app.engine (C:\code\lemmsoftWebsite\repo\modules\clients\site\layout\index.js:60:4) …

1. 什么是区域？
2. 角度ngZone与zone.js有何不同？
3. 什么时候应该使用它们？有人可以帮助使用ngZone的实际例子吗？

我在这里经历了角度文档,然而,我无法完全理解.

https://angular.io/api/core/NgZone

对 requestAnimationFrame 进行单元测试的方法有哪些？

requestAnimationFrame 与 setTimeout/setInterval 具有相同的性质。它也由 zone.js 修补，就像 fn 的 setTimeout 一样被修补。所以我首先想到的选项是

1. 异步 + 当稳定
2. fakeAsync + 滴答（无效）
3. 假异步 + 刷新
4. fakeAsync + 滴答声（数字）
5. setTimeout(1000) + 完成（茉莉花）

结果：

1. async + whenStable ：就是不工作
2. fakeAsync + tick(void) ：不起作用
3. fakeAsync + 刷新：不起作用
4. fakeAsync + tick(number) ：有效（阅读下文）
5. setTimeout(1000) + done (jasmine) ：不工作

这是方法：

 reqAnimFrame() {
   requestAnimationFrame(() => {
     console.log('log stuff');
     this.title = 'req frame title';
   });
 }

这是单元测试（工作单元测试）：

it('fakeAsync', fakeAsync(function () {
  const fixture = TestBed.createComponent(AppComponent);
  const app: AppComponent = fixture.debugElement.componentInstance;

  fixture.detectChanges();

  app.reqAnimFrame(); …

当使用独立组件启动 Angular 时，例如

bootstrapApplication(AppComponent,{...

我们如何设置 ngZone 参数

对于模块来说，它是这样的：

platformBrowserDynamic()                   
  .bootstrapModule(AppModule, { ngZone: 'noop' })

但我没有看到用 bootstrapApplication() 做同样的事情的方法

我们正在使用Cordova和Angular 2构建应用程序.我有以下代码:

    import { Component, OnInit, ChangeDetectorRef, NgZone } from '@angular/core';
    import { Location } from '@angular/common';

    declare var WL : any;

    @Component({
      selector: 'app-store',
      templateUrl: './store.component.html',
      styleUrls: ['./store.component.css']
    })

    export class StoreComponent implements OnInit {
      status: string;
      document: any;

      constructor(private _location: Location,  private changeDetector: ChangeDetectorRef,
        private zone: NgZone) { }

      ngOnInit() {
        var collectionName = 'people';
        this.status = "JSONStore is not yet initialized!";
        if(typeof WL !== "undefined" && typeof WL.JSONStore.get(collectionName) !== "undefined")
                this.status = "JSONStore is initialized!";
        }
      } …

我正在学习本教程:https://angular.io/guide/testing#component-test-scenarios for karma + jasmine unit testing.这是我的代码:

import { AppComponent } from "./app.component";
import { ComponentFixture, TestBed } from "@angular/core/testing";

describe('AppComponent', () => {

let component: AppComponent;
let fixture:   ComponentFixture<AppComponent>;
let h1:        HTMLElement;

beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [ AppComponent ],
  });
  fixture = TestBed.createComponent(AppComponent);
  component = fixture.componentInstance; 
  h1 = fixture.nativeElement.querySelector('h1');
});

it('should display original title', () => {
    expect(h1.textContent).toContain("Ciao");
  });

});

当我运行测试时,我得到以下异常:

 TypeError: Cannot read property 'getComponentFromError' of null
    at TestBed._initIfNeeded (D:/Users/apwzp/AppData/Local/Temp/karma-typescript-bundle-11944DDd01l2f5Y0P.js:1020:52)
    at TestBed.createComponent (D:/Users/apwzp/AppData/Local/Temp/karma-typescript-bundle-11944DDd01l2f5Y0P.js:1174:14)
    at …

我正在使用 Visual Studio Code，并且我正在尝试在 Angular 的 Nrwl.Nx 工作区中调试 Jest 测试。

这是我迄今为止尝试过的：

启动文件

{
  "version": "0.2.0",
  "configurations": [

    {
      "type": "node",
      "request": "launch",
      "name": "Jest All Tests",
      "program": "${workspaceFolder}/src/Web/Finance/client-app/node_modules/.bin/jest",
      "args": ["--runInBand"],
      "cwd": "${workspaceFolder}/src/Web/Finance/client-app/apps/finance",
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "disableOptimisticBPs": true,
      "windows": {
        "program": "${workspaceFolder}/src/Web/Finance/client-app/node_modules/jest/bin/jest"
      }
    }
  ]
}

app.component.spec.ts

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import 'zone.js/dist/zone.js';
import 'zone.js/dist/async-test.js';
import 'zone.js/dist/proxy.js';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [AppComponent],
    }).compileComponents();
  }));
  it('should create …