Angular 6 PWA -- The PWA functionality is interefering with Azure Adal Authentication, not sure how to bypass it

Question

I have a PWA built with Angular 6 and the @angular/pwa npm package and authenticating using adal-angular4 npm package (but could just rebuild that from scratch if needed -- the issue isn't a bug in the package I think)

When attempting to authenticate, although it does work, users are very often greeted with this message of not found (screenshot of console but its the same).

This especially seems to be the case if you are already authenticated to another (or itself) Azure AD product. Where it normally should only load for a while and then let the user in.

Service worker error transcript:

Failed to load 'link.com/#LONGTOKEN' A serviceWorker passed a promise 
to FetchEvent.respondWith() that rejected with 'Error: Response not Ok 
(fetchAndCacheOnce): request for LINK.com/index.html returned response 404 Not Found'.

Answer 1

It seems that writing a function to check for new version of the PWA has cleaned up everything. Because it's a PWA, when replacing files with a new version -- the cache will still be there and shift+reloading won't necessarily clear it, causing a lot of unwanted behaviour.

The code for the cleanup looks like this:

First, inject in the constructor the following: updates: SwUpdate

import { SwUpdate } from "@angular/service-worker"

Then, inside ngOnInit, I have the following:

updates.available.subscribe(event => { updates.activateUpdate().then(() => document.location.reload()); })

It will force a complete refresh 2-3 seconds in if there's a new version available but all works well afterwards.