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:

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

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?

artfulmethod · Accepted Answer · 2018-03-28 20:45:45Z

21

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

answered Mar 28, 2018 at 20:45

artfulmethod

6416 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Laker Over a year ago

Thank you very much. I'll try it out and if it works I'll mark you :) If I may, how should it look in networks tab (devtools) when it works properly? Should there be any download of "cached" files? Or should it be instantaneous?

artfulmethod Over a year ago

You'll see a 200 OK. The file may be served from cache if it is was successfully loaded previously. See stackoverflow.com/questions/38843970/… for more about the caching of that particular file.

Jek Over a year ago

ng build --prod solves the problem. How to run ng build --prod but using development environment.ts?

artfulmethod Over a year ago

For Angular 5 and older, add an entry to the "environments" property in the "production" configuration in angular-cli.json. Then, run "ng build --prod --env=foo". For Angular 6+, either remove the environment.ts entry from the "fileReplacements" property in the "production" configuration in angular.json, or copy the configuration and modify as required. Then, run "ng run yourproject:build:foo".

msmaromi Over a year ago

or you can enable "serviceWorker": true in your configuration (angular.json)

|

C13 · Accepted Answer · 2019-09-01 22:39:43Z

1

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.

answered Sep 1, 2019 at 22:39

C13

1392 silver badges4 bronze badges

Collectives™ on Stack Overflow

Angular ServiceWorkers + MIME type error

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related