Angular ServiceWorkers + MIME类型错误 [英] Angular ServiceWorkers + MIME type error

问题描述

我正在尝试将服务工作者添加到我们现有的angular（5.2，CLI 1.7.1）应用程序中。我做了我应该做的所有事情：

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. 我创建了 ngsw-config.json


2. 我运行了 ng set apps.0.serviceWorker = true 命令，因此我有 serviceWorker：true， angular-cli.json 中的c $ c>。


3. 我已经安装了 @ angular / service-worker： 5.2。 9



4. 我已添加到 app.module.ts ：

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));

但是我遇到了这个错误：

未捕获（已承诺）DOMException：无法注册
ServiceWorker：脚本具有不受支持的MIME类型（'text / html'）。

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

错误错误：未被捕获（承诺）：安全性错误：无法注册
a ServiceWorker：脚本具有不受支持的MIME类型
（'text / html'）。在resolvePromise
（polyfills.3e9ea997ddae46e16c09.bundle.js：1）

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.

您能帮我吗？

此外，我正在检查自己的应用程序以查找可能的差异，但没有，但是我查看了devtools中的network选项卡，并且我注意到应该一直加载应由Service Worker缓存的文件。

推荐答案

这可能是由于缺少ngsw-worker.js文件引起的。

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

就像您在使用 HTML5 pushState样式URL ，并且您已经配置了Web服务器以返回索引页（通常是服务器上实际不存在的任何文件或文件夹的index.html）。如果ngsw-worker.js实际上不存在，则Web服务器会将对ngsw-worker.js的请求重定向到index.html（因此MIME类型为 text / html）。

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").

通常在运行时将ngsw-worker.js文件复制到dist文件夹中

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

ng build --prod

这篇关于Angular ServiceWorkers + MIME类型错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！