Merge pull request #516 from dvargas46/bugfix/511/run-change-hours-outside-zone

fix(change-hours): run change hours interval outside of angular zone

Author: guru1459

projects/angular-ngrx-material-starter/e2e/protractor.conf.js

@@ -9,7 +9,7 @@ const { SpecReporter } = require('jasmine-spec-reporter');
  */
 exports.config = {
   allScriptsTimeout: 11000,
-  specs: ['./src/setup.ts', './src/**/*.e2e-spec.ts'],
+  specs: ['./src/**/*.e2e-spec.ts'],
   capabilities: {
     browserName: 'chrome',
     chromeOptions: {

projects/angular-ngrx-material-starter/e2e/src/setup.ts

@@ -5,6 +5,7 @@ import { Actions, getEffectsMetadata } from '@ngrx/effects';
 import { TestScheduler } from 'rxjs/testing';
 import { Store } from '@ngrx/store';
 import { of } from 'rxjs';
+import { NgZone } from '@angular/core';
 
 import {
   AnimationsService,
@@ -29,6 +30,7 @@ describe('SettingsEffects', () => {
   let animationsService: jasmine.SpyObj<AnimationsService>;
   let translateService: jasmine.SpyObj<TranslateService>;
   let store: jasmine.SpyObj<Store<AppState>>;
+  let ngZone: jasmine.SpyObj<NgZone>;
 
   beforeEach(() => {
     router = {
@@ -51,6 +53,8 @@ describe('SettingsEffects', () => {
     ]);
     translateService = jasmine.createSpyObj('TranslateService', ['use']);
     store = jasmine.createSpyObj('store', ['pipe']);
+    ngZone = jasmine.createSpyObj('mockNgZone', ['run', 'runOutsideAngular']);
+    ngZone.run.and.callFake(fn => fn());
   });
 
   it('should call methods on LocalStorageService for PERSIST action', () => {
@@ -80,7 +84,8 @@ describe('SettingsEffects', () => {
         localStorageService,
         titleService,
         animationsService,
-        translateService
+        translateService,
+        ngZone
       );
 
       effect.persistSettings.subscribe(() => {

projects/angular-ngrx-material-starter/src/app/core/settings/settings.effects.spec.ts

@@ -1,16 +1,14 @@
 import { ActivationEnd, Router } from '@angular/router';
-import { Injectable } from '@angular/core';
+import { Injectable, NgZone } from '@angular/core';
 import { OverlayContainer } from '@angular/cdk/overlay';
 import { select, Store } from '@ngrx/store';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { TranslateService } from '@ngx-translate/core';
-import { combineLatest, interval, merge, of } from 'rxjs';
+import { combineLatest, merge, of } from 'rxjs';
 import {
   tap,
   withLatestFrom,
-  map,
   distinctUntilChanged,
-  mapTo,
   filter
 } from 'rxjs/operators';
 
@@ -51,15 +49,21 @@ export class SettingsEffects {
     private localStorageService: LocalStorageService,
     private titleService: TitleService,
     private animationsService: AnimationsService,
-    private translateService: TranslateService
+    private translateService: TranslateService,
+    private ngZone: NgZone
   ) {}
 
-  changeHour = createEffect(() =>
-    interval(60_000).pipe(
-      mapTo(new Date().getHours()),
-      distinctUntilChanged(),
-      map(hour => actionSettingsChangeHour({ hour }))
-    )
+  hour = 0;
+  changeHour = this.ngZone.runOutsideAngular(() =>
+    setInterval(() => {
+      const hour = new Date().getHours();
+      if (hour !== this.hour) {
+        this.hour = hour;
+        this.ngZone.run(() =>
+          this.store.dispatch(actionSettingsChangeHour({ hour }))
+        );
+      }
+    }, 60_000)
   );
 
   persistSettings = createEffect(