Question

我尝试将服务工作者添加到现有的angular（5.2，CLI 1.7.1）应用程序中。我做了我想做的一切：

我创建了 ngsw-config.json
我运行ng set apps.0.serviceWorker=true命令，因此我在 angular-cli.json 中有"serviceWorker": true,。
我已安装"@angular/service-worker": "5.2.9"

我已添加到 app.module.ts ：

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

我甚至试图将这段代码（我在某处找到解决方案）添加到main.ts

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

但是我收到了这个错误：

未捕获（承诺）DOMException：无法注册a   ServiceWorker：该脚本具有不受支持的MIME类型（＆＃39; text / html＆＃39;）。

错误错误：未捕获（在承诺中）：SecurityError：无法注册   ServiceWorker：该脚本具有不受支持的MIME类型   （＆＃39; text / html的＆＃39）。在resolvePromise   （polyfills.3e9ea997ddae46e16c09.bundle.js：1）

在我自己的个人小应用程序中，我做了同样的工作，没有任何错误。我们遇到此错误的应用程序非常庞大。有很多第三方库。我已经读过它们可能存在问题。

你能帮我吗？

另外，我正在检查我自己的应用程序以找到可能的差异，我没有，但我查看了devtools中的网络选项卡，并且我注意到应该通过服务缓存的文件工人总是被装上。这是正确的行为吗？

Answer 1

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

您可能正在使用HTML5 pushState style URLs，并且configured your web server可以为服务器上实际不存在的任何文件或文件夹返回索引页（通常为index.html）。如果ngsw-worker.js实际上不存在，则Web服务器会将请求重定向到ngsw-worker.js到index.html（因此MIME类型为“text / html”）。

运行

时，通常会将ngsw-worker.js文件复制到dist文件夹中

ng build --prod

Answer 2

在使用Angular8尝试了很多不同的东西之后，我最终将angular-devkit从0.800.2升级到0.803.2

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

然后我得到一个错误：

错误：应该在[PROJECT]文件夹中找到ngsw-config.json配置文件。在您的angular.json配置文件中提供一个或禁用Service Worker。

我通过更改来解决此问题

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

然后它终于起作用了。

Angular ServiceWorkers + MIME类型错误

2 个答案: