我正在尝试将服务 worker 添加到我们现有的 Angular (5.2,CLI 1.7.1)应用程序中。我做了我应该做的一切:
- 我创建了ngsw-config.json
- 我运行
ng set apps.0.serviceWorker=true
命令,所以我在 angular-cli.json< 中有"serviceWorker": true,
/em>. - 我已经安装了
"@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));
但是我得到了这个错误:
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)
在我自己的个人小应用程序中,我做了同样的事情并且没有任何错误。我们出现此错误的应用程序非常庞大。有很多第三方库。我读到它们可能存在问题。
你能帮帮我吗?
此外,我正在检查我自己的应用程序以找出可能的差异,但我没有,但我查看了 devtools 中的网络选项卡,我注意到应该由 service worker 缓存的文件总是被加载.请问这是正确的行为吗?
最佳答案
这可能是由于缺少 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
关于Angular ServiceWorkers + MIME 类型错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49476329/