diff --git a/packages/service-worker/src/module.ts b/packages/service-worker/src/module.ts index 85eef4f67c..d707a58e33 100644 --- a/packages/service-worker/src/module.ts +++ b/packages/service-worker/src/module.ts @@ -7,7 +7,7 @@ */ import {isPlatformBrowser} from '@angular/common'; -import {APP_INITIALIZER, ApplicationRef, InjectionToken, Injector, ModuleWithProviders, NgModule, PLATFORM_ID} from '@angular/core'; +import {APP_INITIALIZER, ApplicationRef, InjectionToken, Injector, ModuleWithProviders, NgModule, NgZone, PLATFORM_ID} from '@angular/core'; import {Observable, merge, of } from 'rxjs'; import {delay, filter, take} from 'rxjs/operators'; @@ -122,10 +122,15 @@ export function ngswAppInitializer( } // Don't return anything to avoid blocking the application until the SW is registered. + // Also, run outside the Angular zone to avoid preventing the app from stabilizing (especially + // given that some registration strategies wait for the app to stabilize). // Catch and log the error if SW registration fails to avoid uncaught rejection warning. - readyToRegister$.pipe(take(1)).subscribe( - () => navigator.serviceWorker.register(script, {scope: options.scope}) - .catch(err => console.error('Service worker registration failed with:', err))); + const ngZone = injector.get(NgZone); + ngZone.runOutsideAngular( + () => readyToRegister$.pipe(take(1)).subscribe( + () => + navigator.serviceWorker.register(script, {scope: options.scope}) + .catch(err => console.error('Service worker registration failed with:', err)))); }; return initializer; }