How to enable Angular PWA service worker?

Question

Within an Angular project the following commands were run using the command line:

ng add @angular/pwa  
ng build --prod

The output in the /dist folder was published as a static website.
https://azureadb2ctesting1.z9.web.core.windows.net/

When running the URL through PWABuilder, the manifest is detected, but not the service worker. Also when changing the networking in Chrome devtools to offline, the page does not load normally, but displays "There is no Internet connection" instead.

Also notice the following error in the console:

main.cb0300ed077227f6fc7f.js:1 Service worker registration failed with: DOMException: Failed to register a ServiceWorker for scope ('https://azureadb2ctesting1.z9.web.core.windows.net/') with script ('https://azureadb2ctesting1.z9.web.core.windows.net/ngsw-worker.js'): The script has an unsupported MIME type ('text/plain').

How can the service worker be enabled for this Angular PWA?

Ostn Ostn · Accepted Answer · 2020-03-18T21:37:59

In angular.json you should have : "serviceWorker": true

In your application root module you should have the following line in the import :

ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })

How to enable Angular PWA service worker?

1 Answers