Angular ServiceWorkers + MIME type error

Question

I'm trying to add service workers to our existing angular (5.2, CLI 1.7.1) application. I did everything I was suppose to:

1. I created ngsw-config.json
2. I run the the ng set apps.0.serviceWorker=true command so I have "serviceWorker": true, in angular-cli.json.
3. I have installed "@angular/service-worker": "5.2.9"

4. I added to app.module.ts:

   import { ServiceWorkerModule } from '@angular/service-worker';
   imports: [
       ...
       ServiceWorkerModule.register('/ngsw-worker.js', 
           { enabled: environment.production }),
   ]
   

I even tried to add this piece of code (which I found as a solution somewhere) to main.ts

platformBrowserDynamic().bootstrapModule(AppModule).then(() => {
    if ('serviceWorker' in navigator && environment.production) {
        navigator.serviceWorker.register('/ngsw-worker.js');
    }
}).catch(err => console.log(err));

But I got this error:

Uncaught (in promise) DOMException: Failed to register a ServiceWorker: The script has an unsupported MIME type ('text/html').

ERROR Error: Uncaught (in promise): SecurityError: Failed to register a ServiceWorker: The script has an unsupported MIME type ('text/html'). at resolvePromise (polyfills.3e9ea997ddae46e16c09.bundle.js:1)

In my own personal small app, I did the same and it worked without any errors. The application where we have this error is pretty huge. With a lot of third party libraries. I've read that there can be a problem with them.

Can you help me please?

Also, I was checking my own application to find possible differences, which I didn't but I looked at network tab in devtools and I've noticed that the files which should be cached by service worker are always loaded. Is it a correct behaviour please?

Answer 1

This is probably caused by a missing ngsw-worker.js file.

Likely you are using HTML5 pushState style URLs, and you have configured your web server to return your index page (typically index.html) for any file or folder that does not physically exist on the server. If ngsw-worker.js does not physically exist, the web server will redirect a request to ngsw-worker.js to index.html (hence the MIME type "text/html").

The ngsw-worker.js file is typically copied to your dist folder when you run

ng build --prod

Answer 2

After trying a lot of different things with Angular8 I finally upgraded angular-devkit from 0.800.2 to 0.803.2

npm install @angular-devkit/build-angular@latest

Then I got an error:

Error: Expected to find an ngsw-config.json configuration file in the [PROJECT] folder. Either provide one or disable Service Worker in your angular.json configuration file.

I fixed this by changing

"ngswConfigPath": "ngsw-config.json" to "ngswConfigPath": "src/ngsw-config.json"

Then it finally worked.