Angular ServiceWorkers + MIME类型错误

Question

我正在尝试将服务工作者添加到我们现有的angular(5.2,CLI 1.7.1)应用程序中.我做了我想做的一切:

1. 我创建了ngsw-config.json
2. 我运行ng set apps.0.serviceWorker=true命令,所以我"serviceWorker": true,在angular-cli.json中.
3. 我安装了 "@angular/service-worker": "5.2.9"

4. 我添加到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));

但我得到了这个错误:

未捕获(在promise中)DOMException:无法注册ServiceWorker:脚本具有不受支持的MIME类型('text/html').

错误:未捕获(在承诺中):SecurityError:无法注册ServiceWorker:脚本具有不受支持的MIME类型('text/html').at resolvePromise(polyfills.3e9ea997ddae46e16c09.bundle.js:1)

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

你能帮我吗？

此外,我正在检查我自己的应用程序以找到可能的差异,我没有,但我查看了devtools中的网络选项卡,我注意到应该由服务工作者缓存的文件总是被加载.请问这是正确的行为吗？

Answer 1

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

您可能正在使用HTML5 pushState样式URL,并且已将Web服务器配置为返回服务器上实际不存在的任何文件或文件夹的索引页(通常为index.html).如果ngsw-worker.js实际上不存在,则Web服务器会将请求重定向到ngsw-worker.js到index.html(因此MIME类型为"text/html").

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

ng build --prod