From 74ece301ea5c00d36a4e61ee050453f89a99926f Mon Sep 17 00:00:00 2001
From: Dan Vargas <danvargas46@gmail.com>
Date: Sat, 22 Feb 2020 12:01:11 -0600
Subject: [PATCH] fix(change-hours): run change hours interval outside of
 angular zone

---
 .../e2e/protractor.conf.js                    |  2 +-
 .../e2e/src/setup.ts                          |  3 ---
 .../core/settings/settings.effects.spec.ts    |  7 ++++-
 .../src/app/core/settings/settings.effects.ts | 26 +++++++++++--------
 4 files changed, 22 insertions(+), 16 deletions(-)
 delete mode 100755 projects/angular-ngrx-material-starter/e2e/src/setup.ts

diff --git a/projects/angular-ngrx-material-starter/e2e/protractor.conf.js b/projects/angular-ngrx-material-starter/e2e/protractor.conf.js
index 800ed5025..523431475 100755
--- a/projects/angular-ngrx-material-starter/e2e/protractor.conf.js
+++ b/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: {
diff --git a/projects/angular-ngrx-material-starter/e2e/src/setup.ts b/projects/angular-ngrx-material-starter/e2e/src/setup.ts
deleted file mode 100755
index 2c2c76dc7..000000000
--- a/projects/angular-ngrx-material-starter/e2e/src/setup.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { browser } from 'protractor';
-
-browser.waitForAngularEnabled(false);
diff --git a/projects/angular-ngrx-material-starter/src/app/core/settings/settings.effects.spec.ts b/projects/angular-ngrx-material-starter/src/app/core/settings/settings.effects.spec.ts
index 1383c8920..f4eff254a 100755
--- a/projects/angular-ngrx-material-starter/src/app/core/settings/settings.effects.spec.ts
+++ b/projects/angular-ngrx-material-starter/src/app/core/settings/settings.effects.spec.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(() => {
diff --git a/projects/angular-ngrx-material-starter/src/app/core/settings/settings.effects.ts b/projects/angular-ngrx-material-starter/src/app/core/settings/settings.effects.ts
index 07101ff69..6a3aae648 100755
--- a/projects/angular-ngrx-material-starter/src/app/core/settings/settings.effects.ts
+++ b/projects/angular-ngrx-material-starter/src/app/core/settings/settings.effects.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(